检查用户是否已提交所有动态表单

Question

我的HTML中有一个表单，每次用户点击＆＃34;＃addOne＆＃34;按钮。表单将被克隆总共3次，每个表单都有自己的验证消息，由jQuery验证插件提供支持。用户单击#addOne按钮以显示最后一个表单后，它将消失并显示最终按钮（＆＃34;＃nextBtn＆＃34;），通过检查用户是否已提交所有表单来完成所有操作成功。如果用户对任何表单进行了更改，则需要再次重新提交该特定表单。每个表单都有一个页码，使用该页码，表单将在PHP中更新。如何制作，以便最终按钮可以知道所有3个表格都已成功提交，如果没有提交任何表格，它不会推进用户？这是我的jsFiddle：https://jsfiddle.net/avs9pejv/10/

HTML

<div class="article_properties">
                        <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
                        <p style="display: inline">Page Number</p>
                        <div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px">

                        <p style="display: inline" class="pageNumber"></p>
                        </div>
                        <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
                        <p>Image</p>
                        <input style="padding: 0px" type="file" name="image">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                            <hr style="border: 1px dotted lightgray; margin-bottom: 50px">
                        </form>



                    </div> <!--End of article properties div-->
                <div id="addOne"><p>+Add page</p></div>
        <div class="nextBtn" style="display: none"><p>Finalize</p></div>

的jQuery

$(".article_properties_form").validate({
        errorElement: 'div',
        rules: {
            image: {
                required: true,
                extension: "jpg,jpeg, png"
            },

            subtitle: {
                required: true,
                minlength: 2,
                maxlength: 25
            },
            text: {
                required: true,
                minlength: 35,
                maxlength: 275
            }
        },

        messages: {
            image: {
                required: "This page needs an image",
                extension: "You're only allowed to upload jpg or png images."
            },

            subtitle: {
                required: "You have to provide a subtitle for this page!",
                minlength: "Your subtitle must be at least 2 characters long",
                maxlength: "Your subtitle must be less than 25 characters long"
            },
            text: {
                required: "Please enter text for this page",
                minlength: "Your text must be at least 35 characters long",
                maxlength: "Your text must be less than 275 characters long"
            },
        },

        });

var numPages = 3;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);

$('#addOne').click(function()
                    {

                        numPages--;

                        if (numPages == 1)
                        {
                            var articlePropsTemplate = $('.article_properties_form:last').clone();           
                                $('.article_properties').append(articlePropsTemplate);                         
                                $('.pageNumber:last').text(numPages);
                                $('.inputNumber:last').text(numPages);
                                 articlePropsTemplate[0].reset();
                                 add_validation_for_forms();

                    articlePropsTemplate.validate().resetForm();
                                $('.nextBtn').fadeIn("slow");
                                $('#addOne').hide();
                        }

                        else
                        {
                                var articlePropsTemplate = $('.article_properties_form:last').clone();
                                $('.article_properties').append(articlePropsTemplate);
                                 articlePropsTemplate[0].reset();
                                $('.pageNumber:last').text(numPages);
                                $('.inputNumber:last').text(numPages);
                                add_validation_for_forms();
                                articlePropsTemplate.validate().resetForm();
                        }

                });

                function add_validation_for_forms(){
                $(".article_properties_form").each(function(){
                    $(this).validate({
                        errorElement: 'div',

        rules: {
            image: {
                required: true,
                extension: "jpg|jpeg|png"
            },

            subtitle: {
                required: true,
                minlength: 2,
                maxlength: 25
            },
            text: {
                required: true,
                minlength: 35,
                maxlength: 275
            }
        },

        messages: {
            image: {
                required: "This page needs an image",
                extension: "You're only allowed to upload jpg or png images."
            },

            subtitle: {
                required: "You have to provide a subtitle for this page!",
                minlength: "Your subtitle must be at least 2 characters long",
                maxlength: "Your subtitle must be less than 25 characters long"
            },
            text: {
                required: "Please enter text for this page",
                minlength: "Your text must be at least 35 characters long",
                maxlength: "Your text must be less than 275 characters long"
            },
        },
                    });
               });
              }


$('.nextBtn').click(function()
        {
            if ($(".article_properties_form").valid())
            {
                $('.article_properties').fadeOut("slow");
                $('.nextBtn').hide();
            }

            else
            {

            }
        });