使用对话框进行 jQuery 验证

Question

我使用错误消息对话框使 jQuery 验证工作得很好。我遇到的问题是，当我单击“提交”并且所有字段都已正确填写时，在表单提交之前会弹出一个空白对话框。我似乎不知道如何阻止这种情况发生。将 onSubmit 设置为 false 将不起作用，因为它根本不会验证。有什么想法吗？

这是包含我所有 jQuery 的脚本标签：

    <script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs();

        $("#DateOfBirth").datepicker({ changeYear: true, changeMonth: true });

        $("#InquiryForm").validate({
            submitHandler: function (form) {
                //form.submit();
            },
            rules: {
                FirstName: { required: true },
                LastName: { required: true },
                Phonenumber: { required: true },
                Email: { required: true, email: true },
                Address: { required: true },
                Country: { required: true },
                Zip: { required: true },
                CourseDeliveryTime: { required: true },
                ProgramType: { required: true },
                ProgramofInterest: { required: true },
                ProgramType: { required: true },
                DateOfBirth: { required: true, date: true }
            },
            messages: {
                FirstName: { required: 'First Name is required.<br/>' },
                LastName: { required: 'Last Name is required.<br/>' },
                Phonenumber: { required: 'Phone Number is required.<br/>' },
                Email: { required: 'E-Mail is required.<br/>', email: 'Please enter a valid e-mail address' },
                Address: { required: 'Mailing Address is required.<br/>' },
                Country: { required: 'Country is required.<br/>' },
                Zip: { required: 'Zip Code is required.<br/>' },
                CourseDeliveryTime: { required: 'Please tell us when you would like to attend class.<br/>' },
                ProgramType: { required: 'Preferred Location is required.<br/>' },
                ProgramofInterest: { required: 'Intended Academic Program is required.<br/>' },
                ProgramType: { required: 'Preferred Location is required.<br/>' },
                DateOfBirth: { required: 'Date of Birth is required.', date: 'Please enter a valid date i.e. 01/01/1999' }
            },
            errorPlacement: function (error, element) {
                error.appendTo($("#dialog"));

            },
            showErrors: function (errorMap, errorList) {
                this.defaultShowErrors();
                $("#dialog").dialog('open');
            },
            errorContainer: "#dialog",
            errorLabelContainer: "#dialog ul",
            wrapper: "li", debug: true,
            onfocusout: false,
            onclick: false
        });
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            close: function (event, ui) {
                $("#dialog").html("");
            },
            title: 'Please fix the following:',
            resizable: false,
            width: 300
        });
        $("#privacyPolicy").dialog({
            autoOpen: false,
            modal: true,
            title: 'Privacy Policy',
            resizable: false,
            height: 210,
            width: 500
        });
        $("#linkPrivacyPolicy").click(function () {
            $("#privacyPolicy").dialog("open");
            return false;
        });
    });
</script>

Answer 1

您可以将开放代码移至 invalidHandler ，这样它仅在出现错误时运行，方法是将以下内容替换

showErrors: function (errorMap, errorList) {
  this.defaultShowErrors();
  $("#dialog").dialog('open');
},

为：

invalidHandler: function() {
  $("#dialog").dialog('open');
},