表单提交时未通过jQuery验证插件测试

Question

我有一个表单将字段提交到localstorage。验证器正在工作，但表单仍然提交已通过的字段，即使验证失败也没有。我如何保持表单不被提交，直到所有字段都通过验证？

jsFiddle demo

HTML：

<div id="page-wrapper"> 
<div class="row"> 
    <div class="col-lg-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Add Publisher</div> 
      <!-- /.panel-heading --> 
      <div class="panel-body"> 
       <div class="col-lg-12"> 
        <form> 
         <div class="form-group col-lg-6"> 
          <label class="control-label" for="name">Publisher Name:</label> 
          <div class="input-group"> 
           <input class="form-control name" placeholder="Publisher Name" name="name" type="text" /> 
          </div> 
         </div> 
         <div class="form-group col-lg-6"> 
          <label class="control-label" for="phone">Phone:</label> 
          <div class="input-group"> 
           <input class="form-control phone" placeholder="Phone" name="phone" type="text" /> 
          </div> 
         </div> 
         <div class="form-group col-lg-6"> 
          <label class="control-label" for="website">Website:</label> 
          <div class="input-group"> 
           <input class="form-control website" placeholder="website" name="website" type="text" /> 
          </div> 
         </div> 
         <div class="form-group col-lg-6"> 
          <label class="control-label" for="contact">Contact:</label> 
          <div class="input-group"> 
           <input class="form-control contact" placeholder="Point of Contact" name="contact" type="text" /> 
          </div> 
         </div> 
         <button type="submit" id="submit" class="btn btn-primary">Submit</button> 
        </form> 
       </div> 
       <!-- /.panel-body --> 
      </div> 
     </div> 
     <!-- /.col-lg-12 --> 
    </div> 
    <!-- /.row --> 
</div> 
<!-- /#page-wrapper --> 

的jQuery：

$('form').validate({ 
rules: { 
    name: { 
     minlength: 3, 
     maxlength: 35, 
     required: true 
    }, 
    phone: { 
     minlength: 9, 
     maxlength: 10, 
     required: true 
    }, 
    website: { 
     required: true, 
     url: true 
    }, 
    contact: { 
     required: true, 
     minlength: 2 
    } 
}, 
highlight: function (element) { 
    $(element).closest('.form-group').addClass('has-error'); 
}, 
unhighlight: function (element) { 
    $(element).closest('.form-group').removeClass('has-error'); 
}, 
errorElement: 'span', 
errorClass: 'help-block', 
errorPlacement: function (error, element) { 
    if (element.parent('.input-group').length) { 
     error.insertAfter(element.parent()); 
    } else { 
     error.insertAfter(element); 
    } 
} 


}); 
$("#submit").click(function() { 
    var name = $(".name").val(); 
    var phone = $(".phone").val(); 
    var website = $(".website").val(); 
    var contact = $(".contact").val(); 
    localStorage.setItem('name', name); 
    localStorage.setItem('phone', phone); 
    localStorage.setItem('website', website); 
    localStorage.setItem('contact', contact); 
}); 

Answer 1

您的自定义click处理程序覆盖验证插件的click事件。摆脱click处理程序并将其代码复制到插件的the submitHandler callback option。该功能只有在按钮被点击并验证满足时才会触发。

$('form').validate({ 
    rules: { 
     name: { 
      minlength: 3, 
      maxlength: 35, 
      required: true 
     }, 
     phone: { 
      minlength: 9, 
      maxlength: 10, 
      required: true 
     }, 
     website: { 
      required: true, 
      url: true 
     }, 
     contact: { 
      required: true, 
      minlength: 2 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.form-group').addClass('has-error'); 
    }, 
    unhighlight: function (element) { 
     $(element).closest('.form-group').removeClass('has-error'); 
    }, 
    errorElement: 'span', 
    errorClass: 'help-block', 
    errorPlacement: function (error, element) { 
     if (element.parent('.input-group').length) { 
      error.insertAfter(element.parent()); 
     } else { 
      error.insertAfter(element); 
     } 
    }, 
    submitHandler: function(form) { 
     var name = $(".name").val(); 
     var phone = $(".phone").val(); 
     var website = $(".website").val(); 
     var contact = $(".contact").val(); 
     localStorage.setItem('name', name); 
     localStorage.setItem('phone', phone); 
     localStorage.setItem('website', website); 
     localStorage.setItem('contact', contact); 
     return false; 
    } 
}); 

更新DEMO：http://jsfiddle.net/xh4ho0hc/2/

Answer 2

我看到的问题是你在底部功能。当该函数触发时，您将设置localStorage的变量，而不管验证器是否独立于该验证器。

考虑使用变量和一些逻辑来查看是否所有变量都通过了验证。循环遍历你的表单控制元素，并且只有当它们全部通过验证时才设置变量。最简单的事情是检查这些元素是否具有“.has-error”类。