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

我在使用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似乎部分有效，因为验证submitHandler代码中存在警报（form.id）。但是，该表单没有提交。我在代码中添加了form.submit（），之后表单会提交，但整个页面会重新加载

据我所知，jquery验证插件应该在验证后自动提交表单，但它似乎不是这样。有人能帮忙吗

---

提前谢谢

我猜当您使用.each（）时，它会尝试逐个验证元素。然后验证程序提交无效表单并重新加载页面，以便验证下一个表单元素。基本上一次又一次地调用validate。

上面的答案是使用$（form）.ajaxSubmit（）；而不仅仅是form.submit（）

---

谢谢，伙计，试过了，似乎不管用。您建议我如何在submithandler中循环表单元素？因为您要提交多个表单，所以无法逐个提交表单。提交表单后，页面会在您提交其他表单之前重定向/执行操作。您可以使用ajaxForms，它在不提交表单数据的情况下发送表单数据。然后，您可以在页面成功后重定向页面。在此处阅读有关ajaxForms的更多信息：。并搜索关键字“ajax”。

    $('.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);

            }
        });

    });

    $('.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();

            }
        });

    });