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();
        }
    });
}

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

另外，无论何时声明自己的submitHandler函数，都将覆盖插件中内置的默认值。 由于在提交表单的自定义submitHandler内看不到任何内容，因此永远不会提交表单。

您要么需要删除submitHandler以允许按照默认功能提交表单（有效时）， $(form).submit()您需要将$(form).submit()放在其中。

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

除了使那些寻求指导的人更加困惑之外，它没有其他目的。 它来自Sam Deering的一个流行的但没有得到很好解释的在线演示/教程 ， 该演示链接到许多地方/来自许多地方。

可以通过将.validate()方法放入DOM ready事件处理程序函数中来删除并替换上面的整个混乱。

$(document).ready(function() {

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

});