Ajax submit after validation (jQuery Mobile + Validator) - ajax

Question

I'm having trouble getting this to work. It validates the fields as expected, but no matter what I try, I can't properly hook the submit.
Here's my form:
<form action="" id="m-frm-contact_us" class="m-contact_submit" method="post" data-ajax="false">
<input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required" minlength="2" maxlength="36" />
<input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required" minlength="2" maxlength="36" />
<input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email" />
<button type="submit" name="submit_contact" value="clicked">Submit</button>
</form>
My JS:
$(document).ready(function(){
$.validator.addMethod(
'placeholder', function(value, element) {
return value != $(element).attr("placeholder");
}, 'This field is required.'
);
$("#m-frm-contact_us").validate({
rules: {
firstName: {
required: true,
minlength: 5,
placeholder: true
},
lastName: {
required: true,
minLength: 5,
placeholder: true
},
mail: {
required: true,
email: true,
placeholder: true
}
},
messages: {
firstName: "First name is required.",
lastName: "Last name is required.",
email: "Valid email address is required."
},
submitHandler: function(form) {
console.log('submitHandler fired.');
contact.submit();
return false;
}
});
$('#m-frm-contact_us').submit(function(e){
console.log('Submit event fired.');
e.preventDefault();
return false;
});
var contact = {
submit : function(){
console.log('Form is being submitted.');
}
};
});
The only thing I get in my console is 'Submit event fired.', called on form submit. Despite my efforts, the form always tries to post to itself, reloading the page.
I want to execute this code on submit:
var contact = {
submit : function(){
console.log('Form is being submitted.');
var _this = this,
post = $.post("/path/to/submit.php", $("#m-frm-contact_us").serialize(), function(response){
try{
if(response==1) {
_this.passed();
} else {
_this.error();
}
}
catch(e){
if(typeof e == 'string') console.log(e);
_this.error();
}
});
},
error : function(){ $.mobile.changePage("#error"); },
passed : function(){ $.mobile.changePage("#passed"); }
}
What am I missing?

Answer 1

I rebuilt the JS, and was able to get this working. Here's the code, in case anyone experiences a similar issue:
Form:
<form action="" method="post" id="m-frm-contact_us" novalidate="novalidate">
<input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required placeholder noSpecial" minlength="2" maxlength="36">
<input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required placeholder" minlength="2" maxlength="36">
<input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email">
<button type="submit" name="submit_contact" value="clicked">Submit</button>
</form>
JS:
$.validator.addMethod('noPlaceholder', function(value, element) {
return value !== element.defaultValue;
}, 'This field is required.');
$.validator.addMethod(
'placeholder', function(value, element) {
return value != $(element).attr("placeholder");
}, 'This field is required.'
);
$.validator.addMethod("regex", function(value, element, regexp) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
}, "No special Characters allowed here. Use only upper and lowercase letters (A through Z; a through z)");
$('#m-frm-contact_us').submit(function(event) {
event.preventDefault();
if($(this).validate({
rules : {
first_name : {
required : true,
maxlength : 36,
regex : /^[A-Za-z\s`'"\\-]+$/
},
last_name : {
required : true,
maxlength : 36,
regex : /^[A-Za-z\s`'"\\-]+$/
}
}
}).form()) {
var $form = $(this), formData = {
firstName : $form.find('#first').val(),
lastName : $form.find('#last').val(),
mail : $form.find('#mail').val()
};
$.post('/path/to/submit.php', formData, function(response) {
if(response == 1) {
$.mobile.changePage("#passed");
} else {
$.mobile.changePage("#error");
}
})
};
return false;
})