This is the form validation part of the PAX library
Mikkel Bergmann, http://www.pointful.com
| pax. | This is the form validation part of the PAX library |
| Functions | |
| pax. | Validate an ip address, also checks for optional port number |
| pax. | Validate an email address |
| pax. | Validates an alpha value |
| pax. | Validates a numeric value |
| pax. | Validates an alpha numeric value |
| pax. | Validates length of a field |
| pax. | Excludes an option value from a select box |
| pax. | Validates range of the value of a field |
| pax. | Validates that the value of one field is the same as another |
| pax. | Validates contents of a field |
| pax. | Validates an Australian post code |
| pax. | Validates a number with the luhn algorithm. |
| pax. | Validates a IMEI number using luhn algorithm |
| pax. | Validates a credit card number; optionally validates card type |
| pax. | Validates a US Zip code |
| pax. | Validates domain name |
| pax. | Validates via an ajax call. |
| pax. | Initialises all form variables, and sets validation events |
pax.validate.validators.ip = function( field, mask )
Validate an ip address, also checks for optional port number
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="ipaddress">
</span>
</form>
[:.
valDict = {
'ipaddress': { mask: 'ip', hint: 'This must be a valid IP Address. You can specify a port, with <b>:[port number]</b>' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="ipaddress" value="127.0.0.1:8080">
</span>
<div id='pax.validate.validators.ip.example1'></div>
[:.
pax.$('pax.validate.validators.ip.example1').innerHTML = 'Is this a valid email address?: ' + pax.validate.validators.ip( pax.$('ipaddress') );
:]Private usage, this will validate the fields value.
pax.validate.validators.email = function( field, mask )
Validate an email address
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<label for="emailAddress">Email:</label>
<input type="text" name="emailAddress">
</span>
</form>
[:.
valDict = {
'emailAddress': { mask: 'email', hint: 'This must be in email format' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="emailAddress" value="bill@microsoft.com">
</span>
<div id='pax.validate.validators.email.example1'></div>
[:.
pax.$('pax.validate.validators.email.example1').innerHTML = 'Is this a valid email address?: ' + pax.validate.validators.email( pax.$('emailAddress') );
:]Private usage, this will validate the fields value.
pax.validate.validators.alpha = function( field, mask )
Validates an alpha value
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="alpha">
</span>
</form>
[:.
valDict = {
'alpha': { mask: 'alpha', hint: 'This must be in alpha format' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="alpha" value="qwerty">
</span>
<div id='pax.validate.validators.alpha.example1'></div>
[:.
pax.$('pax.validate.validators.alpha.example1').innerHTML = 'Is this only alpha chars?: ' + pax.validate.validators.alpha( pax.$('alpha') );
:]Private usage, this will validate the fields value.
pax.validate.validators.numeric = function( field, mask )
Validates a numeric value
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="numeric">
</span>
</form>
[:.
valDict = {
'numeric': { mask: 'numeric', hint: 'This must be in numeric format' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="numeric" value="123456">
</span>
<div id='pax.validate.validators.numeric.example1'></div>
[:.
pax.$('pax.validate.validators.numeric.example1').innerHTML = 'Is this only numeric chars?: ' + pax.validate.validators.numeric( pax.$('numeric') );
:]Private usage, this will validate the fields value.
pax.validate.validators.alphaNumeric = function( field, mask )
Validates an alpha numeric value
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="alphaNumeric">
</span>
</form>
[:.
valDict = {
'alphaNumeric': { mask: 'alphaNumeric', hint: 'This must be in alphaNumeric format' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="alphaNumeric" value="123456">
</span>
<div id='pax.validate.validators.alphaNumeric.example1'></div>
[:.
pax.$('pax.validate.validators.alphaNumeric.example1').innerHTML = 'Is this only alphaNumeric chars?: ' + pax.validate.validators.alphaNumeric( pax.$('alphaNumeric') );
:]Private usage, this will validate the fields value.
pax.validate.validators.len = function( field, mask )
Validates length of a field
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="len">
</span>
</form>
[:.
valDict = {
'len': { mask: [ { mask: 'len', minLen: '4', maxLen: '6'} ], hint: 'This must be in at least 4 chars, and no more than 6 chars' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="len" value="12345">
</span>
<div id='pax.validate.validators.len.example1'></div>
[:.
pax.$('pax.validate.validators.len.example1').innerHTML = 'Is this only len chars?: ' + pax.validate.validators.len( pax.$('len'), { minLen: 4, maxLen: 6 } );
:]Private usage, this will validate the fields value.
Excludes an option value from a select box
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<select name="exclude">
<option value='one'>One</option>
<option value='two'>Two</option>
<option value='three'>Three</option>
</select>
</span>
</form>
[:.
valDict = {
'exclude': { mask: [ { mask: 'excludeSelect', exclude: [0] } ], hint: 'Select anything but the first option' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<select name="exclude" id="exclude">
<option value='one'>One</option>
<option value='two'>Two</option>
<option value='three'>Three</option>
</select>
</span>
<div id='pax.validate.validators.exclude.example1'></div>
[:.
pax.$('pax.validate.validators.exclude.example1').innerHTML = 'Is this a valid option?: ' + pax.validate.validators.excludeSelect( pax.$('exclude'), { exclude: [0] } );
:]Private usage, this will validate the fields value.
pax.validate.validators.range = function( field, mask )
Validates range of the value of a field
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="rangeField">
</span>
</form>
[:.
valDict = {
'rangeField': { mask: [ { mask: 'range', min: '10', max: '50'} ], hint: 'This must be in at least 10, and no more than 50' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="rangeField2" value="30">
</span>
<div id='pax.validate.validators.range.example1'></div>
[:.
pax.$('pax.validate.validators.range.example1').innerHTML = 'Is this within range?: ' + pax.validate.validators.range( pax.$('rangeField2'), { min: 20, max: 40 } );
:]Private usage, this will validate the fields value.
pax.validate.validators.fieldEqual = function( field, mask )
Validates that the value of one field is the same as another
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form id='valForm' name='valForm'>
<label for='pass1'>Password: </label><input type='text' name='pass1'/>
<label for='pass2'>Re-enter password: </label><input type='text' name='pass2'/>
<input type='submit'/>
</form>
<div id='pax.validate.validators.len.example2'></div>
[:.
var valDict = {
'pass1': {
mask: [
{ mask: 'len', minLen: '6', maxLen: '12'},
{ mask: 'checkPasswords', field2: 'pass2' }
], hint: 'Please enter a pasword between 6 and 12 chars, you must renter the same password in the password 2 box.' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This will validate the two password fields contain the same value
pax.validate.validators.notEmpty = function( field, mask )
Validates contents of a field
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="notEmptyField">
</span>
</form>
[:.
valDict = {
'notEmptyField': { mask: 'notEmpty', hint: 'This field must have a value specified' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<form name='valForm'>
<span>
<input name="level" type="radio" value="one"> 1
<input name="level" type="radio" value="two"> 2
<input name="level" type="radio" value="three"> 3
</span>
</form>
[:.
valDict = {
'level': { mask: 'notEmpty', hint: 'You must check a level' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the radio fields, and display a hint with the specified text. It should be noted that the formName is requied to validate radio fields, ie: you can’t validate radio fields outside a form.
<span>
<input type="text" id="notEmptyField2" value="12345">
</span>
<div id='pax.validate.validators.len.example2'></div>
[:.
pax.$('pax.validate.validators.len.example2').innerHTML = 'Is this field not empty?: ' + pax.validate.validators.notEmpty( pax.$('notEmptyField2') );
:]Private usage, this will validate the fields value.
pax.validate.validators.postcode = function( field, mask )
Validates an Australian post code
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="postcode">
</span>
</form>
[:.
valDict = {
'postcode': { mask: 'postcode', hint: 'This must be in postcode format' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="postcode" value="2444">
</span>
<div id='pax.validate.validators.postcode.example1'></div>
[:.
pax.$('pax.validate.validators.postcode.example1').innerHTML = 'Is this a valid postcode?: ' + pax.validate.validators.postcode( pax.$('postcode') );
:]Private usage, this will validate the fields value.
pax.validate.validators.luhn = function( field, mask )
Validates a number with the luhn algorithm. Note that this is used in CC validation, and IMEI validation.
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="number">
</span>
</form>
[:.
valDict = {
'number': { mask: 'luhn', hint: 'This must be a number that has a valid luhn check digit' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="number" value="4242424242424242">
</span>
<div id='pax.validate.validators.luhn.example1'></div>
[:.
pax.$('pax.validate.validators.luhn.example1').innerHTML = 'Is this a valid luhn check digit number?: ' + pax.validate.validators.luhn( pax.$('number') );
:]Private usage, this will validate the fields value.
pax.validate.validators.imei = function( field )
Validates a IMEI number using luhn algorithm
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="imei" id="imei">
</span>
</form>
[:.
valDict = {
'imei': { mask: 'imei', hint: 'This must be a valid IMEI number' },
};
pax.validate.initValidation( 'valForm', valDict );
:]
pax.validate.validators.creditcard = function( field, mask )
Validates a credit card number; optionally validates card type
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="cc" id="cc">
</span>
</form>
[:.
valDict = {
'cc': { mask: [ { mask: 'creditcard', cardtype: 'Visa' } ], hint: 'This must be a valid VISA Credit card number' }
};
pax.validate.initValidation( 'valForm', valDict );
:]<form name='valForm'>
<span>
<select name="card_type" id="card_type">
<option>Mastercard</option>
<option>Visa</option>
<option>Diners</option>
<option>Amex</option>
</select>
</span>
<span>
<input type="text" name="cc" id="cc">
</span>
</form>
[:.
valDict = {
'cc': { mask:
[ {
mask: 'creditcard',
cardtype: 'Visa',
cardSelect: pax.$('card_type')
} ],
hint: 'This must be a valid VISA Credit card number' }
};
pax.validate.initValidation( 'valForm', valDict );
:]<form name='valForm'>
<span>
<select name="card_type" id="card_type">
<option value=''>Please select card type</option>
<option value='1'>Mastercard</option>
<option value='2'>Visa</option>
<option value='3'>Diners</option>
<option value='4'>Amex</option>
</select>
</span>
<span>
<input type="text" name="cc" id="cc">
</span>
</form>
[:.
valDict = {
'cc': { mask:
[ {
mask: 'creditcard',
cardtype: 'Visa',
cardSelect: pax.$('card_type'),
cardSelectByText: true
} ],
hint: 'This must be a valid VISA Credit card number' }
};
pax.validate.initValidation( 'valForm', valDict );
:]Note that by setting cardSelectByText to ture, we use the option text, rather than the option value.
pax.validate.validators.zip = function( field, mask )
Validates a US Zip code
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="zip">
</span>
</form>
[:.
valDict = {
'zip': { mask: 'zip', hint: 'This must be in zip format (NNNNN-NNNN)' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="zip" value="90210-5555">
</span>
<div id='pax.validate.validators.zip.example1'></div>
[:.
pax.$('pax.validate.validators.zip.example1').innerHTML = 'Is this a valid zip?: ' + pax.validate.validators.zip( pax.$('zip') );
:]Private usage, this will validate the fields value.
pax.validate.validators.domain = function( field, mask )
Validates domain name
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm'>
<span>
<input type="text" name="domain">
</span>
</form>
[:.
valDict = {
'domain': { mask: 'domain', hint: 'This must be a valid domain name' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the field, and display a hint with the specified text.
<span>
<input type="text" id="domain" value="pointful.com">
</span>
<div id='pax.validate.validators.domain.example1'></div>
[:.
pax.$('pax.validate.validators.domain.example1').innerHTML = 'Is this a valid domain?: ' + pax.validate.validators.domain( pax.$('domain') );
:]Private usage, this will validate the fields value.
pax.validate.validators.ajaxValidate = function( field, mask )
Validates via an ajax call. Note that your should assign any non-ajax validators first, when using an ajax validator.
| field | a form field we want to validate |
| true | boolean if the field validation passes, false otherwise |
<form name='valForm' action='../pax.validate.example.validation.php'>
<span>
<textarea name="notes">These are my notes</textarea>
</span>
</form>
[:.
valDict = {
'notes': { mask: [ { mask: 'ajaxValidate', 'method': 'notes'} ], hint: 'The notes are checked for some bad words on the server, try "firetruck"' }
};
pax.validate.initValidation( 'valForm', valDict );
:]This sets a validator on the field, and displays a hint with the specified text.
| ajaxValidate | 1 |
| method | ’notes’ |
| formName | ’valForm’ |
| fieldName | ’notes’ |
| fieldValue | ’These are my notes’ (or whatever notes are in the field) |
| error | string (if a validation error occured, it will contain a message that will be displayed for 5 seconds) |
| formName | ’valForm’ |
| fieldName | ’notes’ |
| validField | boolean (if the field is valid, it will be true) |
pax.validate.initValidation = function( formName, valDict )
Initialises all form variables, and sets validation events
<form name='valForm'>
<span>
<label for="email">Email:</label>
<input type="text" name="email">
</span>
</form>
[:.
valDict = {
'email': {
mask: [
{ mask: 'email' },
{ mask: 'notEmpty' }
],
hint: 'The email address is mandatory, and must be a valid email address'
}
};
pax.validate.initValidation( 'valForm', valDict );
:]This would set a validator on the email field, and display a hint with the specified text.
Validate an ip address, also checks for optional port number
pax.validate.validators.ip = function( field, mask )
Validate an email address
pax.validate.validators.email = function( field, mask )
Validates an alpha value
pax.validate.validators.alpha = function( field, mask )
Validates a numeric value
pax.validate.validators.numeric = function( field, mask )
Validates an alpha numeric value
pax.validate.validators.alphaNumeric = function( field, mask )
Validates length of a field
pax.validate.validators.len = function( field, mask )
Validates range of the value of a field
pax.validate.validators.range = function( field, mask )
Validates that the value of one field is the same as another
pax.validate.validators.fieldEqual = function( field, mask )
Validates contents of a field
pax.validate.validators.notEmpty = function( field, mask )
Validates an Australian post code
pax.validate.validators.postcode = function( field, mask )
Validates a number with the luhn algorithm.
pax.validate.validators.luhn = function( field, mask )
Validates a IMEI number using luhn algorithm
pax.validate.validators.imei = function( field )
Validates a credit card number; optionally validates card type
pax.validate.validators.creditcard = function( field, mask )
Validates a US Zip code
pax.validate.validators.zip = function( field, mask )
Validates domain name
pax.validate.validators.domain = function( field, mask )
Validates via an ajax call.
pax.validate.validators.ajaxValidate = function( field, mask )
Initialises all form variables, and sets validation events
pax.validate.initValidation = function( formName, valDict )