The Jquery Validation engine is a plugin that checks the data in forms. Out of many that have been tested, this seems to be the most robust and easiest to work with.
|
1 2 3 |
<input value="" class="validate[required,custom[email]]" data-errormessage-custom-error="Let me give you a hint: [email protected]" type="text" name="email" /> |
POSTCODE
|
1 2 3 |
<input value="" class="validate[required,custom[onlyLetterNumber][maxSize[7]][minSize[4]]] type="text" name="postcode"/> |
Numbers only (with spaces)
|
1 2 3 4 |
<input class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="luckynumber" id="luckynumber" />/ <input type="text" name="user" id="login" placeholder="Username" class="validate[required]" data-prompt-position="topLeft:20,2" data-errormessage-value-missing="Email is required!"> |
Integer (Year)
|
1 2 3 |
<input type="text" name="year" placeholder="Year" id="year" class="date validate[required,custom[integer],minSize[4],max[2000],min[1900]]" onblur="addyear()" data-errormessage-custom-error="This is not a valid number"> |
Start Date Using Datepicker
|
1 2 3 |
<input type="text" placeholder="Policy Start Date (dd/mm/yyyy)" class="validate[required] datepicker" data-prompt-position="topLeft:110,15" name='PolicyYear' id="datepickerx" style="cursor:text;"> |
validate[required] (just must include)
validate[required,minSize[6]] (required and must contain min of 6 chars)
validate[maxSize[6]] (not required but must be min of 6 chars)
validate[required,equals[password]] (must be the same as password field)
validate[required] radio (must choose a radio button)
validate[minCheckbox[2]] checkbox (must tick two tick boxes)
validate[required] checkbox (must choose a checkbox button)
Change position of message (data-prompt-position=”bottomLeft:20,5″)
datepicker (see start date using datepicker)
Postcode
|
1 2 3 |
<input class="validate[required,custom[postcode]]" style="text-transform:uppercase" type="text" name="postcode" /> |
You need to add this to the jqueryvalidationEngine-en.js
|
1 2 3 4 5 6 |
"postcode": { "regex": /^[A-Z].+[0-9].+[A-Z]$/i, "alertText": "* Invalid postcode" }, |
Select box dropdown
|
1 2 3 4 5 6 7 |
<select name="colour1" class="validate[required]" data-prompt-position="topLeft:110,15" id="colour1"> <option value="">Choose Colour</option> <option value="No">Red</option> <option value="Yes">Blue</option> </select> |
