Question

我有一个带有2个必填字段的简单表单，错误消息放在滑出的div中。如果您没有填写任何表单，验证工作正常并显示错误消息，但是当您填写该字段时，它会一直显示错误消息。我尝试了一些解决方案，但没有任何工作，我不知道是什么导致了这一点。这是我的代码： HTML

<form id="login_form"  method="post">
<ul>
    <li>
  <label for="user">Gebruikersnaam</label>
  <input  type="text" name="user" id="user" />
  </li>
  <li>
  <label for="paswoord">Paswoord</label>
  <input  type="password" name="password" id="paswoord" />
  </li>


 <li>
  <input class="btn black" type="submit" value="Login" />
  <span id="password" ><a href="#">Wachtwoord vergeten?</a></span>
  </li>
  </ul>
</form>

Jquery的

    var validator = $('#login_form').validate({     
     rules: {           
        user: {
            required: true},
        password: {
            required: true},                
        },
    onfocusout: true,

invalidHandler: function(form, validator) {
 var errors = validator.numberOfInvalids();
  if (errors) {
    var message = errors == 0
      ? 'You missed 1 field. It has been highlighted'
      : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
   $("div.error").hide().slideDown('slow');
            setTimeout(function(){$("div.error").slideUp(); },10000);
  } else {
    $("div.error").hide();
  }
},

submitHandler: function(form){              
        $("div.ok").removeClass("error").hide().slideDown('slow');
        setTimeout(function(){$("div.ok").slideUp(); },10000);
        }
});
jQuery.validator.messages.required = "";

Answer 1

我通过创建额外的变量来解决它：

invalidHandler: function(form, validator) {
 var errors = validator.numberOfInvalids();
 var notifyDiv = $('#notify');
 var notifyMessage = $('#notify span');

  if (errors) {
    var message = errors == 0
      ? 'U bent 1 veld vergeten.Dit is aangeduid.':
       'U bent  ' + errors + ' velden vergeten. Deze zijn aangeduid.';
     notifyMessage.html(message);
     notifyDiv.addClass('error').removeClass('ok').hide().slideDown('slow');
            setTimeout(function(){notifyDiv.slideUp(); },10000);
  } else {
    $("div.error").hide();
  }
},

submitHandler: function(form){
    var notifyDiv = $('#notify');
    var notifyMessage = $('#notify span');
    var message = 'Formulier werd verstuurd.';
    notifyMessage.html(message);
    notifyDiv.addClass('ok').removeClass('error').hide().slideDown('slow');
    setTimeout(function(){notifyDiv.slideUp(); },10000);
}

}

Jquery验证：字段有效后未删除错误消息

1 个答案: