Question

我有一个多步骤表单，可以根据您点击的按钮（NEXT或BACK）隐藏/显示表单中的DIV元素。

我也在使用JQuery Validation插件来验证表单。

我想要做的就是每次有人点击NEXT时都会验证表单。到目前为止，这是我的JQuery：

$("#Next").bind("click", function(e) {
     $("#myForm").validate();      //validate the form when clicking on next
     $("#FormStepCurrent").hide(); //hide the current div
     $("#FormStepNew").show();     //show the new div
});

因此，当有人点击按钮NEXT时，它会触发验证，然后显示下一个div。但是如果当前可见的div中存在验证错误，如何在错误修复之前阻止/显示当前可见的div？

Answer 1

您可以使用valid()方法。它将运行完整验证并返回一个布尔值

$("#Next").bind("click", function (e) {
    if (!$("#myForm").valid()) {
        return;
    }    
    $("#FormStepCurrent").hide(); //hide the current div
    $("#FormStepNew").show(); //show the new div
});

valid() method docs

Answer 2

试试这个：

 $("#myForm").validate({
       submitHandler: function(form) {
       // do other things for a valid form
       $("#FormStepCurrent").hide(); //hide the current div
       $("#FormStepNew").show(); 
   }
 });

如果验证失败，如何停止按钮的默认操作

2 个答案: