2013-11-28 61 views
0

对于我的注册表单,我使用了引导程序3和jQuery验证插件。 一切工作正常,除了每次用户点击一个字段时重复错误消息的事实。我检查了一些正在运行的示例,我找不到与我的代码不同的东西。我也尝试删除()或隐藏()错误消息,但仍然存在。 有没有解决它的建议?错误消息重复多次 - bootstrap和jQuery验证表单

<form accept-charset="UTF-8" method="post" action="form.php" class="form-inline" novalidate="novalidate"> 
     <div class="row col-md-10"> 
      <label for="name" class="control-label">Full name*</label> 
      <input type="text" class="form-control" id="name" name="name"> 

      <label for="email" class="control-label">E-mail*</label> 
      <input type="email" class="form-control" id="email" name="email" placeholder="e.g. [email protected], [email protected], ..."> 

      <label for="city" class="control-label">City*</label> 
      <input type="text" class="form-control" id="country" name="country" data-validation="country" data-toggle="tooltip" data-placement="right" title="" data-original-title="Why we need your city? We aim to match people on a regional basis. Although this is done for ensuring convenient times as most contact is usually via phone or video." name="city"> 

      <label for="zipcode"> Zip code </label> 
      <input type="text" class="ignore form-control zipcode" name="zipcode"> 
     </div> 
     <div class="row col-md-10"> 
      <label for="currently_employed" class="control-label currently_employed"> Are you in current employment?* </label> 
      <ul class="options"> 
      <li> 
       <input type="radio" class="form-control" id="user_currently_employed_true" name="currently_employed" value="true" /> 
       <label for="currently_employed_true" class="control-label"> Yes </label> 
      </li> 
      <li> 
       <input type="radio" class="form-control" id="user_currently_employed_false" name="currently_employed" value="false" /> 
       <label for="currently_employed_false" class="control-label"> No </label> 
      </li> 
      </ul> 
      <div class="clear"></div> 

      <label for="company" class="control-label"> Your Company/University* </label> 
      <input type="text" class="form-control" name="company"/> 
    </div> 
    [....] 
</form> 

验证:

<script src="lib/jquery.validate.min.js"></script> 
<script src="lib/jquery.form.js"></script> 
<script src="lib/jquery.mockjax.js"></script> 
<script src="lib/additional-methods.min.js"></script> 
<script> 
    $('#country').tooltip(); 

    $('form').validate({ 
     ignore: '.ignore', 
     rules: { 
      name: { 
      minlength: 2, 
      required: true 
      }, 
      email: { 
      required: true, 
      email: true 
      }, 
      messages: { 
      name: "Please specify your name", 
      email: { 
       required: "We need your email address to contact you", 
       email: "Your email address must be in the format of [email protected]" 
      } 
      } 
     }, 
     errorPlacement: function(error, element) { 
     error.insertAfter('#wrap-error span'); 
     }, 
     highlight: function(element) { 
      $(element).closest('.form-inline').addClass('has-error'); 
     }, 
     unhighlight: function(element) { 
      $(element).closest('.form-inline').removeClass('has-error'); 
     } 
    }); 

</script> 
</body> 
</html> 

回答

0

我终于想通了什么问题。 它只是要求在表单元素内部包含#wrap-error,其中包含错误消息追加的内容。

相关问题