使用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>

- user971741

Answer 1

在提交之前，将您的最后一行更改为检查表单是否有效:

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

编辑：我忘记加上“return false;”代码以阻止表单正常提交（所以只有在验证通过时才会发生）。

- GregL

---

我用你的代码更改了列表行，但现在整个验证脚本都停止工作了。当我在没有输入任何内容的情况下点击提交时，它只是刷新，而当我正确填写所有信息后提交时，浏览器会给出“此网页不可用”的错误提示。 - user971741

@Maven 真糟糕，我早有预感。试试我的更新代码。 - GregL

@DGregL，仍然遇到一些奇怪的行为。现在，如果我尝试提交一个空表单，它会给出“此字段是必需的”的良好验证错误，但是在我填写表单并尝试提交之后，提交按钮再次变得不响应。而且它不像以前那样在值更改时重新检查验证.. :s - user971741

我已经更新了我的帖子中的代码，以防现在有语法错误。 - user971741

Answer 2

GregL的回答基本上是正确的。

最终让我成功的是还添加了以下内容:

onsubmit: false

最终代码:

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

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

- PenguinOfwar