用keyPress检查输入

Question

我有这个js代码，它检查我的输入字段以获得正确的电子邮件。

$(document).ready(function () {
$('.subscription-form input').keypress(function () {
    var inputEmail = $('#email-subscribe');
    var email = inputEmail.val();
    var button =  $('.subscription-form button');
    console.log(email.length);
    if (IsEmail(email)) {
        button.prop('disabled', false);
        inputEmail.css({'border':'none'});
    }
    else if (email.length < 1) {
        inputEmail.css({'border':'none'});
        console.log('enter');
    }
    else{
        button.prop('disabled', true);
        inputEmail.css({'border':'1px solid red'});
    }
});
});

问题是，当我写正确的电子邮件，然后清除输入，我的按钮仍然处于活动状态。我试着检查

if(input.email.length < 0)

然后禁用按钮，但只有在只有一个字符时才能工作。

请帮我解决这个问题。

HTML：

<form enctype="multipart/form-data" method="post" accept-charset="UTF-8"
                  action="/response.php"
                  class="text-center row subscription-form">
     <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
     <div id="output" class="col-lg-9 col-md-9 col-sm-8 col-xs-12"></div>
     <input id="email-subscribe" type="text" title="email" name="email"
                           placeholder="Enter your email*" class="col-lg-9 col-md-9 col-sm-8 col-xs-12 cnt-input">
           <button disabled class="btn request getjob col-lg-2 col-md-8 col-sm-10 hidden-xs">Sign up</button>
       <div class="col-lg-2 col-md-8 col-sm-10 col-xs-12 visible-xs margi-top-10">
           <button disabled class="btn request getjob">Sign up</button>
       </div>
  </div>
</form>

Answer 1

试试这个小提琴

您应该使用keyup而不是keypress来获取输入的值，因为您总是在上次输入字符之前得到字符串。

似乎当您使用backspace清空输入时，输入值被设置为一个空字符串，该字符串通过正则表达式检查(假设您在函数IsEmail中使用正则表达式)。

在本例中，在将值传递给函数之前，我已经将值设置为null：

var email = inputEmail.val() == "" ? null : inputEmail.val();

不需要else if条件，因为您总是希望禁用如果电子邮件失败。

Answer 2

只需添加：

$('input').blur(function(){
    $(this).trigger('keypress');
});

一旦他试图点击，模糊将首先触发，并将再次触发验证。

演示：JSnippet演示