表单未通过 jQuery 验证提交

Question

我在 .net/MVC 项目中使用 jQuery 验证插件时遇到了一些问题。验证通常工作得很好，问题是在提交时出现的：我希望当表单中有任何验证错误时不提交表单，为此我设置了

debug:true

。

但是将其设置为 true 后，当提交按钮变得无响应时，即使一切都很好，即没有验证错误，单击提交按钮时也不会发生任何事情。如果删除 debug:true，即使其中存在验证错误，它也会提交表单。

我想要解决这个问题，中间的方法，即当单击提交时，如果有错误，它不会提交表单并显示错误。如果没有错误，那么就简单地提交了。

    <script type="text/javascript">
      $(document).ready(function() {
$("#productSubmit").validate( {
  debug : true, rules : {
     prdctttle : {
        maxlength : 50, 
        required : true, 
        onlyChars : true }
     , prdctdscrptn : {
        maxlength : 250, 
        required : true, 
        onlyChars : true }
    }
  , messages : {
     }
  }
); 
}
); 
$.validator.addMethod('onlyChars', function (value) {
return /^[a-zA-Z ,-!]+$/.test(value); }, 'Please enter a valid name with only alphabets');
   $("#productSubmit").validate( {
  submitHandler : function(form) {
     if ($(form).valid()) form.submit(); return false; // prevent normal form posting
     }
  }
);
</script>

Answer 1

更改最后一行以在提交前检查表单是否有效：

$("#productSubmit").validate({ 
    submitHandler: function(form) {  
                           if ($(form).valid()) 
                               form.submit(); 
                           return false; // prevent normal form posting
                    }
 });

编辑：我忘记添加“return false;”行停止正常提交表单（因此仅在验证通过时才会发生）。

Answer 2

GregL 的答案大部分是正确的。

最终让我正确工作的还在于添加了：

onsubmit: false

最终代码：

$("#productSubmit").validate({ 
 onsubmit: false,
 submitHandler: function(form) {  
   if ($(form).valid())
   {
       form.submit(); 
   }
   return false; // prevent normal form posting
 }
});

这会覆盖默认的提交行为，并在submitHandler 中处理最终的验证检查和提交。