jQuery Validation Submitting without Validation in Firefox

Question

I've put together a pretty simple competition script - it's commented out below and you can find the demo at http://www.jakeisonline.com/stackoverflow/jqueryvalidation/page/

I am using a jquery plugin to achieve the validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The problem is only in Firefox (3.5.2) - the form submits without any validation at all, and ignores the ajax. IE8 & 7 seem to be fine.

$("#f").validate({
        rules: {
            first_name: {
                required: function() {
                    if ($.trim($("#first_name").val()) === 'e.g. Jane') {
                        $("#first_name").val('').removeClass('example');
                        return $("#first_name").val();
                    }                       
                }
            },
            email: {
                required: function() {
                    if ($.trim($("#email").val()) === 'jane@example.com') {
                        $("#email").val('').removeClass('example');
                        return $("#email").val();
                    }
                }
            },
            friend_1_name: {
                required: function() {
                    if ($.trim($("#friend_1_name").val()) === 'e.g. Jane') {
                        $("#friend_1_name").val('').removeClass('example');
                        return $("#friend_1_name").val();
                    }                       
                }
            },
            friend_1_email: {
                required: function() {
                    if ($.trim($("#friend_1_email").val()) === 'jane@example.com') {
                        $("#friend_1_email").val('').removeClass('example');
                        return $("#friend_1_email").val();
                    }
                }
            },
            friend_2_name: {
                required: "#friend_2_email:filled"
            },
            friend_2_email: {
                required: "#friend_2_name:filled"
            },
            friend_3_name: {
                required: "#friend_3_email:filled"
            },
            friend_3_email: {
                required: "#friend_3_name:filled"
            }
        },
        submitHandler: function() {
            $("#submit").attr("disabled", "disabled");                  

            // See if they also opted-in to the main mailing list, if they did, set that interest and add them to the mailing list
            if ($('#optin').is(':checked')) {
                alert('hello');
                $.post("", { first_name: $("#first_name").val(), email: $("#email").val(), key: "sub-678-1.50;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-50.htm", 'prefs[]': ["1", "2"] });
                // Display the opt-in confirmation message
                $("#thanks_subscribing").fadeIn("slow");
                $("#optintickbox").hide();

                // Fade out the confirmation
                setTimeout(function() {
                    $("#thanks_subscribing").fadeOut("slow")
                },10000);

            } else {
                // Add them to the Entries Mailing List
            $.post("", { first_name: $("#first_name").val(), email: $("#email").val(), key: "sub-678-1.50;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-50.htm", followup: "1", prefs: "2"} );
            }

            // Now start going through their friends, the first friend will always be filled out, so we don't need to check that
            $.post("", { first_name: $("#friend_1_name").val(), email: $("#friend_1_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()} );

            if ($("#friend_2_email").val() !== '') {
                $.post("", { first_name: $("#friend_2_name").val(), email: $("#friend_2_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()} );
            }

            if ($("#friend_3_email").val() !== '') {
                $.post("", { first_name: $("#friend_3_name").val(), email: $("#friend_2_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()} );
            }

            // Remove all of the submitted data to stop button spamming
            $("#friend_1_name, #friend_1_email, #friend_2_name, #friend_2_email, #friend_3_name, #friend_3_email").val('');

            // Bring the submit button out of disabled state
            $("#submit").removeAttr("disabled");

            // Bring up the friends sent confirmation
            $("#friends_sent").fadeIn("slow");
            //$("#optin").attr('false', true);

            // Fade out the confirmation
            setTimeout(function() {
                $("#friends_sent").fadeOut("slow")
            },10000);

            return false;
        }
    });

I'm not really sure why Firefox is submitting the page with Refresh but IE isn't, I've looked over and over the code and can't find the error. Firebug is only finding errors in the jQuery library itself.

Can anyone help?

Answer 1

You have got various validation issues in your XHTML 1.0 Transitional markup. IE is being nice by helping you out. FF is more strict and will fail.

The lack of input closing tags is playing havoc with the selectors inside the validation script. On the 1st friend email it is actually trying to get the text of an li element!

See the following w3c validator check . Fix these first, hopefully it will sort the issue. If not report back and I will look again.