javascript - Jquery 验证第二次不起作用

Question

问题是这个 jquery 验证第二次在我的表单中不起作用。它第一次工作完美，但第二次它显示错误消息，但表单将提交。代码在这里

 (function ($, W, D) {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function () {
                //form validation rules
                $("#aspnetForm").validate({
                    rules: {
                        firstname: "required",
                        lastname: "required",
                        company: "required",
                        jobtitle: {
                            required: true,
                        },
                        phone: {
                            required: true,
                            number: true
                        },
                        email: {
                            required: true,
                            email: true
                        },

                    },
                    messages: {
                        firstname: "Please enter your first name",
                        lastname: "Please enter your last name",
                        company: "Please enter your company name",
                        jobtitle: "Please enter your job title",
                        phone: "Please enter a valid phone number",

                        email: "Please enter a valid email address",
                    },
                    submitHandler: function (form) {

                        $('#aspnetForm').on('submit', function (e) {
                            e.preventDefault();
                            if (flag) {
                                createListItem();
                            }
                        });

                        //form.submit(function (e) {
                        //    e.preventDefault();
                        //    if (flag) {
                        //        createListItem();
                        //    }
                        //});


                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function ($) {
            JQUERY4U.UTIL.setupFormValidation();
            $('#newsletterModal').on('hidden.bs.modal', '.modal', function () {
                clearFields();
            });
            $('#newsletterModal').on('shown.bs.modal', function (e) {
                $('#lblMsg').empty();
            });
        });

    })(jQuery, window, document);

谁能帮帮我

Answer 1

您的submitHandler回调函数...

submitHandler: function (form) {
    $('#aspnetForm').on('submit', function (e) {
        e.preventDefault();
        if (flag) {
            createListItem();
        }
    });
}

不要将 submit 事件处理程序放入 submitHandler 回调中! 我不清楚您要做什么，但是 < em>the submitHandler插件的回调函数已经捕获并替换了表单的默认提交事件。

此外，每当您声明自己的 submitHandler 函数时，您都会覆盖插件中内置的默认函数。由于我在提交表单的自定义 submitHandler 中没有看到任何内容，因此该表单永远不会被提交。

您需要删除 submitHandler 以允许按照默认功能提交表单(有效时)，或者您需要放置 $(form)。提交()在它的某个地方。

submitHandler: function (form) {
    if (flag) {
        createListItem();
    }
    $(form).submit();
}

<小时/>

注意:

像这样包装所有内容是多余的、不必要的、冗长的和神秘的......

(function($,W,D) {
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function() {
            $("#aspnetForm").validate({ .... });
        }
    }

    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

除了给那些寻求指导的人带来更多困惑之外，它没有任何有用的目的。 它来自一个流行但解释不清的 online demo/tutorial by Sam Deering链接到/来自许多地方。

上面的整个困惑可以通过将 .validate() 方法放入 DOM 就绪事件处理函数中来删除和简单地替换...

$(document).ready(function() {

    $("#aspnetForm").validate({ .... });

});