使用 jquery 验证插件验证和提交页面上的多个表单

Question

我在使用 jquery 验证插件提交的网页上获取多个表单时遇到问题

下面是在一个页面上生成多个表单的代码

<?php for($index=1;$index<4;$index++) : ?>
            <tr>
                <td class="center">
                <div class="box-content" id="share_rss_">
                    <form class="share_rss_form" id="share_rss_form_<?php echo $index; ?>" method="post" action="abc2_db.php?id=<?php echo $index; ?>" data-noty-options='{"text":"This is a success notification","layout":"topLeft","type":"success"}'>
                        <table class="table table-bordered table-striped table-condensed " id="tbl_<?php echo $index; ?>" >


                            <tr  id='tr_<?php echo $index; ?>'><td><input type=text class="required" name='rss_title' id='title' style="width:400px;margin:0px" value="This is just a demo"></td>
                            </tr>

                            <tr  id='tr_<?php echo $index; ?>'><td><textarea class="required" name='rss_description_<?php echo $index; ?>' style="width:400px;margin:0px" >Description series</textarea></td></tr>
                            <tr  id='tr_<?php echo $index; ?>'><td><b>Featured</b>&nbsp;&nbsp;<input type='checkbox' name='rss_featuredArticle_<?php echo $index; ?>' value=1 />
                                &nbsp;&nbsp;&nbsp;&nbsp;<b>Rated</b>&nbsp;&nbsp;<input type='checkbox' name='rss_rated_<?php echo $index; ?>' value=1 />
                                &nbsp;&nbsp;&nbsp;&nbsp;<b>Expiry time</b>&nbsp;&nbsp;<input type='checkbox' name='rss_expirySelect_<?php echo $index; ?>' value=1 />
                                <select name='rss_expiry_<?php echo $index; ?>'><option value=15>15</option><option value=30>30</option></select></td>
                            </tr>
                            <tr  id='tr_<?php echo $index; ?>'>
                            <td><select class="category" class="required" name="category_<?php echo $index; ?>" id="category_<?php echo $index; ?>">
                                <option value=""    ><b>---Select---</b></option>
                                <?php foreach($category as $c) :?>
                                <option value="<?php echo $c; ?>" ><b><?php echo $c; ?></b></option>
                                <?php endforeach; ?>
                                <br>
                                </select>
                            </td>
                            </tr>
                            <tr  id='tr_<?php echo $index; ?>'><td><div id="container_for_category_<?php echo $index; ?>"></div></td>
                            </tr>

                        </table>
                    </form>
                </div>
                </td>
                <td class="center">
                    <button class="btn btn-info approveid" href="#" type="submit" id="approve_<?php echo $index; ?>"><i class="icon-edit icon-white"></i></button>
                    <button class="btn btn-danger trashid" href="#" type="submit" id="trash_<?php echo $index; ?>"><i class="icon-trash icon-white"></i></button>
                </td>
            </tr>
            <?php endfor; ?>

下面是触发表单验证和提交的jquery代码

    $('.share_rss_form').each(function(index,e1){
        $(e1).validate({
            errorClass: "error",
            validClass: "success",
            submitHandler: function(form) { 
                                    //The below alert is triggered
                alert(form.id)      ;
                form.submit();
                return true;
                //alert(e1);
                //console.log(form);

            }
        });

    });

问题是上面的 jquery 似乎部分工作，因为验证 submitHandler 代码中的 alert(form.id)。但是表单没有提交。我在代码中添加了 form.submit()，之后表单确实提交但整个页面被重新加载。

据我所知，jquery 验证插件应该在验证后自动提交表单，但似乎并非如此。有人可以帮忙吗？

提前致谢！

Answer 1

我的猜测是，当您使用 .each() 时，它会尝试逐个验证元素。然后验证器提交无效的表单并重新加载页面以验证下一个表单元素。基本上一次又一次地调用验证。

Answer 2

上面的答案是使用 $(form).ajaxSubmit();而不是简单的 form.submit()。

    $('.share_rss_form').each(function(index,e1){
        $(e1).validate({
            errorClass: "error",
            validClass: "success",
            submitHandler: function(form) { 
                                    //The below alert is triggered
                alert(form.id);
                $(form).ajaxSubmit();

            }
        });

    });