Hi Guys,
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()) === '[email protected]') {
$("#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()) === '[email protected]') {
$("#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?