[jQuery] Validate Plugin - using the submitHandler
I need to display a promotional message when the user clicks submit if
they meet certain criteria about their postcode. I have heard that you
should use the submitHandler but being completely new to JavaScript
and even newer to JQuery I am a little stuck on how I should write
this. I thought it would be something like this but it obviously
doesn't work.
submitHandler: function(form) {
var special = /^[T]{1}[A]{1}([1-13|17|19|25]){2}/.test(value);
if (special);
alert('You have been entered into a competition to win a special
prize');
form.submit();
}, // end of submitHandler
I basically need this message to display when they click submit and
then they confirm and the form goes to the server.
This is the code I have so far for the validation:
$(document).ready(function(){
$("#orderForm").validate({
onfocusout: function(element) {
this.element(element);
},
rules: {
firstName: {
required: true,
},
surname: {
required: true,
},
phoneNumber: {
required: true,
},
streetName: {
required: true,
},
city: {
required: true,
},
postalCode: {
required: true,
shipPostalCode: true,
},
billEmailAddress: {
required: true,
},
billPhoneNumber: {
required: true,
},
promoCardNumber: {
required: true,
fidelityCardNumber: true,
},
billCardNumber: {
required: true,
},
billCardType: {
required: true,
},
}, //end of rules
}); // end of validate
}); // end of function
$.validator.addMethod('postalCode', function (value) {
return /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value);
}, 'Please enter a valid postcode');
$.validator.addMethod('promoCardNumber', function (value) {
return /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}
(\!|\&|\@|\?){1}$/.test(value);
}, 'Please enter a valid card number');
This is my html code:
<form id="orderForm" method="post" action="x">
<table id="formTable" cellpadding="5">
<tr>
<td>
<h3>Shipping and Billing Information</h3>
</td>
<td> </td>
</tr>
<tr>
<td><label for="firstname">First Name</label></td>
<td><input id="firstName" type="text" name="firstName"
maxlength=
"30" /></td>
</tr>
<tr>
<td><label for="surname">Surname</label></td>
<td><input id="surname" type="text" name="surname"
maxlength="30" /></td>
</tr>
<tr>
<td><label for="phoneNumber">Contact Telephone Number</
label></td>
<td><input id="phoneNumber" type="text" name="phoneNumber"
maxlength="30" /></td>
</tr>
<tr>
<td><label for="streetName">Street Name</label></td>
<td><input id="streetName" type="text" name="streetName"
maxlength="30" /></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input id="city" type="text" name="city" maxlength="30" /