Справка по проверке jQuery

Question

У меня есть следующий код, который выполняет проверку в различных формах на моем веб-сайте, однако НЕ ВСЕ формы имеют проверку. Когда пользователь отправляет форму, функция ShowModal() должна запускаться, НО НЕ, если произошли какие-либо ошибки проверки. Проверка работает нормально, но модал не отображается вообще. Кто-нибудь может помочь? Благодаря.

    var newpost_validator = {};
    var editpost_validator = {};

    var newupload_validator = {};
    var editupload_validator = {};

    var newquestion_validator = {};
    var editquestion_validator = {};

    var comment_validator = {};

    $(function()
    {
        newpost_validator = $("#newpostform").validate({
            rules: {
                post_title: "required",
                post_url:  {
                    required: {
                        depends: function() {
                            return $('input[name=post_category]:checked').val() == '14';
                        }
                    },
                    url: true
                },
                post_code: {
                    required: {
                        depends: function() {
                            return $('input[name=post_category]:checked').val() == '13';
                        }
                    }
                },
                post_content: "required",
                post_tags: "required"
            },
            messages: {
                post_title: "Your post MUST have a title",
                post_url: "Please enter a valid URL, don't forget the http://",
                post_code: "Please add your code",
                post_content: "Your post MUST have some content",
                post_tags: "Please add some tags"
            }
        });

        editpost_validator = $("#editpostform").validate({
            rules: {
                post_title: "required",
                post_content: "required"
            },
            messages: {
                post_title: "Please enter a title",
                post_content: "Please enter the content"
            }
        });

        newquestion_validator = $("#newquestionform").validate({
            rules: {
                post_title: "required",
                post_content: "required",
                post_tags: "required"
            },
            messages: {
                post_title: "Please enter a title",
                post_content: "Please enter the content",
                post_tags: "Please enter some tags"
            }
        });

        editquestion_validator = $("#editquestionform").validate({
            rules: {
                post_title: "required",
                post_content: "required"
            },
            messages: {
                post_title: "Please enter a title",
                post_content: "Please enter the content"
            }
        });

        newupload_validator = $("#newuploadform").validate({
            rules: {
                post_title: "required",
                post_upload: {
                      required: true,
                      accept: "jpg|jpeg|gif|bmp|png"
                    },
                post_content: "required",
                post_tags: "required"
            },
            messages: {
                post_title: "Please enter a title",
                post_upload: "Please upload a valid image file",
                post_content: "Please enter the content",
                post_tags: "Please enter some tags"
            }
        });

        editupload_validator = $("#edituploadform").validate({
            rules: {
                post_title: "required",
                post_content: "required"
            },
            messages: {
                post_title: "Please enter a title",
                post_content: "Please enter the content"
            }
        });

        comment_validator = $("#commentform").validate({
            rules: {
                comment: "required"
            },
            messages: {
                comment: "Please add a comment"
            }
        });

        $('form').submit(function()
        {
            var bFlag = true;

            if (newpost_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }
            if (editpost_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }

            if (newquestion_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }
            if (editquestion_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }

            if (newupload_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }
            if (editupload_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }

            if (comment_validator.numberOfInvalids() > 0)
            {
                bFlag = false; HideModal();
            }

            if(bFlag)
            {
                ShowModal();
            }

        });
});

Answer 1

Помимо всего, что люди здесь ответили, еще 1 вещь, которая может вам помочь, - это добавить submitHandler к вашему объекту проверки

comment_validator = $("#commentform").validate({
    rules: {
        comment: "required"
    },
    messages: {
        comment: "Please add a comment"
    },
    submitHandler: function(form) {
        // form.submit();
        // you can set a flag to true here
        // instead of doing it on the last submit
        // then fire your modal function where you simply test for this flag 
        // matching true
    }
});

По умолчанию отправка формы запрещена, когда форма недействительна, и отправляется как обычно, когда она действительна. Вы можете обработать отправку вручную, используя submitHandler, как в примере выше.

для дальнейшей помощи, я думаю, вы можете установить глобальную переменную, а затем проверить свой последний вызов

function everythingOk(){
    var bFlag = true;
    if (
        newpost_validator.numberOfInvalids() > 0
        || 
        editpost_validator.numberOfInvalids() > 0
        ||
        newquestion_validator.numberOfInvalids() > 0
        ||
        editquestion_validator.numberOfInvalids() > 0
        ||
        newupload_validator.numberOfInvalids() > 0
        ||
        editupload_validator.numberOfInvalids() > 0
        ||
        comment_validator.numberOfInvalids() > 0
    ){
        bFlag = false;
    }
    if(bFlag){
        ShowModal();
    }else{
        HideModal();
    }
};

теперь вы должны иметь в виду, что если вы добавите submitHandler к проверкам, ваша функция everythingOk будет выполняться N раз, что означает, что она может дважды проверить, что все в порядке, для того, чтобы вы могли добавить дополнительный шаг, все вокруг я думаю, что ваше приложение нуждается в немного большем планировании, я думаю, я бы заставил каждую проверку установить другой флаг как true, а затем проверить, все ли флаги имеют значение true, или проверить, почему вы хотите использовать несколько форм на одной странице, почему бы не объединить их

Надеюсь, это поможет