Question

I have jQuery validation working pretty well using a dialog for the error messages. The problem I am having is that when I click submit, and all the fields are filled out correctly, I have a blank dialog popping up before the form submits. I can’t seem to figure out how to stop that from happening. Setting the onSubmit to false will not work because then it won’t validate at all. Any ideas?

This is the script tag with all my jQuery in it:

    <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

You can move your open code to the invalidHandler so it only runs when there are errors, by replacing this:

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

With this:

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