Question

我想只在myErrorContainer中显示第一个错误，所以首先我要做这样的代码。

    <div id="myErrorContainer" class="fa fa-times" aria-hidden="true"> 
  </div>
   <form method="POST" action="#" role="form" id="signup_form">
   <div class="form-group">
  <label class="control-label" for="firstname">First name</label>
  <input name="fname" id="firstname" type="text" maxlength="50" class="form-
  control">
  </div>
 <div class="form-group">
  <label class="control-label" for="lastname">Last name</label>
 <input name="lname" id="lastname" type="text" maxlength="50" class="form-
 control">
</div>
<div class="form-group">
<button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create 
your account</button>
 </div>
</form>

我想只在myErrorContainer中显示第一个错误，所以首先我要做这样的代码。

   <script>
     $("#signup_form").validate({
     rules: 
     {
         fname:
        {
            required: true,
        },
        lname:
        {
            required: true
        }
     },
      messages:{
        fname: 'Enter your First name',
        lname : 'Enter Last name',
      },
     showErrors: function(errorMap, errorList) {
    $("#signup_form").find("input").each(function() {
        $(this).removeClass("error");
    });
     $("#myErrorContainer").html("");
    if(errorList.length) {
       console.log('lenght is' + errorList.length);
        console.log(errorList[0]['message']);
        $("#myErrorContainer").html(errorList[0]['message']);
        $(errorList[0]['element']).addClass("error");
    }
    }
         });
</script>

上面的代码工作正如它假设的那样，但问题是如果我留下名字输入并只关注姓氏输入并点击提交按钮它显示2个错误，一秒钟它显示输入姓氏然后突然显示输入你的名字，所以这是一个焦点问题，它假设只显示第一个错误'输入你的名字'，看起来是因为第二次输入焦点验证运行两次。后来我以下面的方式改变了代码。我删除了错误showErrors并将其替换为：

  $("#signup_form").validate({
     rules: 
     {
         fname:
        {
            required: true,
        },
        lname:
        {
            required: true
        }
     },
      messages:{
        fname: 'Enter your First name',
        lname : 'Enter Last name',
      },
     invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
    console.log(errors);
    $("#myErrorContainer").html(validator.errorList[0].message);
    validator.errorList[0].element.focus(); //Set Focus
    $("#signup_form").find("input").each(function() {
        console.log('removing class');
        $(this).removeClass("error");
    });
}
}
         });

上面的代码工作正常但是因为它删除焦点输入错误只显示第一个错误但invalidHandler不能在keyup上工作所以如果myErrorContainer有错误'输入你的名字'并且我输入First而它没有删除该错误，直到我单击提交按钮。

Jquery验证在单个错误容器中运行不正常

0 个答案: