Hi there,
I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX.
This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion.
I've followed the validation plug-in's documentation when constructing my code:
JS:
$(document).ready(function() {
var validator = $("#form_notify").validate({
messages: {
email: {
required: 'Please insert your email address. Without your email address we will not be able to
contact you!',
email:'Please enter a valid email address. Without a valid email address we will not be able to
contact you!'
}
},
errorLabelContainer: "#error",
success: "valid",
submitHandler: function(form) {$(form).ajaxSubmit();}
});
$('#email').blur(function() {
if (validator.numberOfInvalids() 0) {
$("#label").addClass("label_error");
return false;
}
else {$("#label").removeClass("label_error");}
});
$('#form_notify').submit(function() {
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});
});
Form HTML:
<form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get">
<fieldset>
<div class="input">
<label id="label" for="email">Email Address:</label>
<input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/>
<div class="clearfix"></div>
</div>
<input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm">
<input type="hidden" name="followup" value="19">
<input type="submit" name="submit" id="submit-button" value="Notify Me">
<div id="error"></div>
</fieldset>
</form>
I can't understand what is causing IE to act differently, any assistance would be greatly appreciated.
I can provide more information if needed.
Thanks in advance!
