错误消息重复多次 - 引导和 jQuery 验证表单答案

【问题标题】：error message repeat multiple time - bootstrap and jQuery validation form错误消息重复多次 - 引导和 jQuery 验证表单
【发布时间】：2013-12-14 06:26:12
【问题描述】：

对于我的注册表单，我使用的是 bootstrap 3 和 jQuery Validation 插件。一切正常，除了每次用户单击字段时都会重复错误消息。我检查了一些工作示例，但找不到与我的代码不同的任何内容。我也尝试删除（）或隐藏（）错误消息，但仍然存在。有什么解决办法吗？

<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. yourname@work.com, yourname@university.com, ..."> 

            <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 name@domain.com"
            }
          }
      },
      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>

【问题讨论】：

标签： javascript jquery validation twitter-bootstrap

【解决方案1】：

我终于弄清楚了问题所在。它只是请求包含#wrap-error，即在表单元素内部附加错误消息的那个。

【讨论】：

【解决方案2】：

我遇到了类似的错误 - 但这是因为页面中有多个元素与我的错误 element 选择器匹配。换句话说，对于下面的代码sn-p，我的页面上匹配element的不止一个东西@

error.insertAfter(element);

【讨论】：