0

我有一个带有 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 = "";
4

1 回答 1

0

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

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);
}

}

于 2012-08-30T10:14:47.380 回答