Validate and Submit Multiple forms on a page using jquery validation plugin

Question

I am facing trouble getting the multiple forms on a webpage submitted using the jquery validation plugin

Below is the code for generating multiple forms on a page

<?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; ?>

Below is the jquery code to trigger the validation and submission of forms

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

            }
        });

    });

The problem is the above jquery seems to work partially because alert(form.id) in the validation submitHandler code. However the form doesn't submit. I have added form.submit() in the code after which the form does submit but the entire page is reloaded.

According to me the jquery validation plugin should automatically submit the form after validation but it doesnt seem so. Can someone please help?

Thanks in advance!

Answer 1

My guess is when you use .each(), it tries to validate the elements one by one. Then the validator submits the invalid form and reloads the page in order to validate next form element. Basically calling validate again and again.

Answer 2

The answer to above was the use $(form).ajaxSubmit(); instead of simply 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();

            }
        });

    });