0

我已经建立了一个分页（jQuery ajax 样式）超过 6 页的表单。我正在尝试让 jQuery 验证插件使用它。

表单底部是一个“下一步”按钮，该按钮将该页面的值提交到数据库，并使用 jQuery .load() 将下一个“页面”加载到#pagination div 中。

我刚刚使用jQuery validate 插件向表单添加了 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() 加载的。

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

非常感谢！

4

2 回答 2

1

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

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

我不太清楚您的页面加载方案最终将如何工作。但是，为了ajax与 jQuery Validate 插件一起使用，您将利用其内置的submitHandler回调函数。换句话说，该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;}

==用于比较value，=用于设置value。

于 2013-02-11T17:23:32.227 回答
0

无论您是否要验证来自方法 .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'));
     });
});
于 2013-12-03T13:17:52.613 回答