Question

我已经构建了一个超过6页分页（jQuery ajax样式）的表单。我试图让jQuery validate插件与它一起工作。

在表单的底部是“下一步”＆＃39;按钮，用于将该页面的值提交给数据库，并加载下一个页面＆＃39;使用jQuery .load（）进入#pagination div。

我刚刚使用jQuery validate plugin向表单添加了jQuery验证，但验证在屏幕上闪烁了一秒钟，然后页面仍然移动到下一页。我很感激任何帮助！如果验证成功，我希望允许表单移动到下一页，但如果不成功则不允许。这是我的代码（我把它简化为尽可能简单）：

的jQuery

jQuery(document).ready(function(){
    jQuery("#survey").validate();   
    var page=1; //Set first page on load
    jQuery("#pagination").load("survey_"+page+".htm");

    jQuery("#next").click(function(){

        if(page !== 6){
            page=page+1;}
        if(page == 6){
            jQuery('#next').replaceWith('<button id="submit" type="button">Submit</button>');
        }
        else
        {page == 6;}

    jQuery("#pagination").load("survey_"+page+".htm");
 });

HTML

<form class="survey" id="survey" method="post" action="">
    <div id="pagination">
</div>
<div class="nav"><input id="prev" type="submit" value="Previous" ><input class="submit" id="next" value="Next" name="submit" type="submit" /></div>
</form>

表单页面位于6个单独的文件中，名为survey_1.htm，survey_2.html .... survey_6.htm，如上所示，它们是使用.load（）加载的。

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

非常感谢！

Answer 1

引用OP：＆＃34;如上所述，如果验证成功，我希望允许表单移至下一页，但如果是不成功。目前，验证在屏幕上闪烁下一页已加载。＆＃34;

它正在转移到下一页，因为您的页面加载逻辑绕过了Validation插件的内置点击处理程序。

我不太清楚你的页面加载方案最终会如何运作。但是，为了将ajax与jQuery Validate插件一起使用，您可以利用其built-in submitHandler callback function。换句话说，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
        }
    });

});

工作演示：http://jsfiddle.net/zpkm2/

另请注意您的代码：

else
    {page == 6;}

应该是：

else
    {page = 6;}

== is for comparison of value，=用于设置值。

Answer 2

无论您是要验证来自方法.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的

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'));
     });
});

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

的jQuery

HTML

2 个答案: