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

此外，这里的所有人都回复了另外一件可以帮助您将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然后检查所有不同的标志是否为真，或者检查为什么你想在同一页面上有多个表单，为什么不组合它们？

希望这有帮助

jQuery验证帮助

1 个答案: