jQuery验证插件允许在验证失败时提交。表单正在使用.load

我已经构建了一个超过6页的分页表单（jqueryajax风格）。我正在尝试让jQuery验证插件使用它

表单底部有一个“下一步”按钮，它将该页面的值提交到数据库，并使用jQuery.load（）将下一个“页面”加载到#分页div中

我刚刚使用将jQuery验证添加到表单中，但是验证会在屏幕上闪烁一秒钟，页面仍会转到下一页。如果有任何帮助，我将不胜感激！如果验证成功，我希望允许表单移动到下一页，但如果验证失败，则不允许。以下是我的代码（我已将其简化为尽可能简单）：

jQuery

jQuery（文档）.ready（函数（）{
jQuery（“#调查”）.validate（）；
var page=1；//设置加载时的第一页
jQuery（“#分页”）.load（“survey#”+page+”.htm）；
jQuery（“#下一步”）。单击（函数（）{
如果（第6页）{
第页=第+1页；}
如果（第==6页）{
jQuery（'#next'）。替换为（'Submit'）；
}
其他的
{page==6；}
jQuery（“#分页”）.load（“survey#”+page+”.htm）；
});

HTML

表单页面位于名为survey_1.htm、survey_2.html…survey_6.htm的6个独立文件中，正如您在上面看到的，它们是使用.load（）加载的

如前所述，如果验证成功，我希望允许表单移动到下一页，但如果验证失败，则不允许。目前，在加载下一页之前，验证会在屏幕上闪烁

非常感谢

Quote OP:“如前所述，如果验证成功，我希望允许表单移动到下一页，但如果验证成功，则不允许 不成功。此时，验证在屏幕上闪烁 将加载下一页。“

它将移动到下一页，因为页面加载逻辑绕过了验证插件的内置点击处理程序

我不太清楚您的页面加载方案最终将如何工作。但是，为了将

ajax

与jQuery验证插件一起使用，您可以利用它的功能。换句话说，

submitHandler

功能只有在表单通过验证测试时才会启动

像这样的

jQuery(document).ready(function(){

    jQuery("#survey").validate({
        submitHandler: function(form) {
            // your ajax loading logic
            // form.submit(); // use this to finally submit form data at the last step
            return false;  // prevent form submit because you are doing the ajax
        }
    });

});

工作演示：

---

还要注意您的代码：

else
    {page == 6;}

应该是：

else
    {page = 6;}

---

，而

=

用于设置值。

无论您是否希望验证来自方法的表单。load（），请在此处尝试以下操作：

HTML

<div class="continent-type">
     <label for="people">What is your continent?</label>
     <input type="radio" name="continent" value="A">The Americas
     <input type="radio" name="continent" value="E">European
</div>
<div id="form-load"></div>

---

请展示其余的代码。如果这是关于jQuery验证插件的，那么你的jQuery包含

.Validate（）

？抱歉！好地方-现在包含了验证位，这非常重要！你太棒了！非常感谢-它非常有效：）为了他人的利益，我将粘贴下面的代码：D再次感谢-非常感谢您的快速响应。

else
    {page = 6;}

<div class="continent-type">
     <label for="people">What is your continent?</label>
     <input type="radio" name="continent" value="A">The Americas
     <input type="radio" name="continent" value="E">European
</div>
<div id="form-load"></div>

function validateForm(form){
     form.validate({
          rules:{
               // rules...
          },
          messages:{
               // messages...
     });
};
jQuery('input[name=continent]').on('click', function(){

     var continent= jQuery(this).val();

     jQuery("#form-load").load('/get-form.html', {continent:continent}, function(){
          validateForm($(this).find('form'));
     });
});