Prevent jQuery Ajax call if form is invalid using jQuery validate - forms

Question

I'm trying to use jQuery validate to validate a form and handle the form submission but can't seem to get the syntax correct and cannot find an example like mine in the API. My code is below:
$("#beta_form").validate({
rules: {
p_emailaddress: {
required: true,
email :true
}
}
submitHandler : function() {
$.ajax({
type:'POST',
url :'websiteUrlWithService',
data: $('#beta_form').serialize(),
complete: function() {
$('#dialog').jqmHide();
$('#formSubmissionThanks').jqmShow();
}
});
}
});
The form HTML is as follows:
<form class="login_form" id="beta_form" name="beta_form">
<label for="p_name" class="login_label">Name:</label>
<input type="hidden" id="p_enquiry" name="p_enquiry" value="Beta Enquiry" />
<input type="text" id="p_name" name="p_name" class="login_input" value="" />
<br />
<br/>
<label for="emailaddress" class="login_label">Email Address:</label>
<input type="text" id="p_emailaddress" name="p_emailaddress" class="login_input" value="" />
<br />
<br/>
<label for="role" class="login_label">Current Role:</label>
<select size="1" id="p_role" name="p_role">
<option value="1">None Selected</option>
<option value="2">Recruiter</option>
<option value="3">HR Role</option>
<option value="4">Self Employed</option>
</select>
<br/>
<br/>
<label for="terms" class="login_label">Include me in the Beta testing selection?</label>
<input type="checkbox" id="p_terms" name="p_terms" class="boxes login_label"/>
<br />
<br/>
<input type="submit" id="submitbuttonbeta" class="login_submitbutton" value="Submit" />
</form>
When I run this with Firebug on it suggests that I'm missing a } after the submitHandler property list but as far as I can see the syntax is correct. This error is preventing my form from firing altogether.
Any suggestions?

Answer 1

You were missing comma
$("#beta_form").validate({
rules: {
p_emailaddress: {
required: true,
email :true
}
},
submitHandler : function() {
$.ajax({
type:'POST',
url :'websiteUrlWithService',
data: $('#beta_form').serialize(),
complete: function() {
$('#dialog').jqmHide();
$('#formSubmissionThanks').jqmShow();
}
});
}
});

Answer 2

I think you're just missing a ',' after the rules object is defined, actually...
$("#beta_form").validate({
rules: {
p_emailaddress: {
required: true,
email :true
}
},
submitHandler : function() {
$.ajax({
type:'POST',
url :'websiteUrlWithService',
data: $('#beta_form').serialize(),
complete: function() {
$('#dialog').jqmHide();
$('#formSubmissionThanks').jqmShow();
}
});
}
});