pax.validate

This is the form validation part of the PAX library

Author

Mikkel Bergmann, http://www.pointful.com

Summary
pax.validateThis is the form validation part of the PAX library
Functions
pax.validate.validators.ipValidate an ip address, also checks for optional port number
pax.validate.validators.emailValidate an email address
pax.validate.validators.alphaValidates an alpha value
pax.validate.validators.numericValidates a numeric value
pax.validate.validators.alphaNumericValidates an alpha numeric value
pax.validate.validators.lenValidates length of a field
pax.validate.validators.lenValidates length of a field
pax.validate.validators.rangeValidates range of the value of a field
pax.validate.validators.notEmptyValidates contents of a field
pax.validate.validators.postcodeValidates an Australian post code
pax.validate.validators.luhnValidates a number with the luhn algorithm.
pax.validate.validators.imeiValidates a IMEI number using luhn algorithm
pax.validate.validators.creditcardValidates a credit card number; optionally validates card type
pax.validate.validators.zipValidates a US Zip code
pax.validate.validators.domainValidates domain name
pax.validate.validators.ajaxValidateValidates via an ajax call.
pax.validate.initValidationInitialises all form variables, and sets validation events

Functions

pax.validate.validators.ip

pax.validate.validators.ip = function(field,
mask)

Validate an ip address, also checks for optional port number

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="ipaddress" value="127.0.0.1:8080">
</span>
<div id='pax.validate.validators.ip.example1'></div>
[:.
    $('pax.validate.validators.ip.example1').innerHTML = 'Is this a valid email address?: ' + pax.validate.validators.ip( $('ipaddress') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.email

pax.validate.validators.email = function(field,
mask)

Validate an email address

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="emailAddress" value="bill@microsoft.com">
</span>
<div id='pax.validate.validators.email.example1'></div>
[:.
    $('pax.validate.validators.email.example1').innerHTML = 'Is this a valid email address?: ' + pax.validate.validators.email( $('emailAddress') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.alpha

pax.validate.validators.alpha = function(field,
mask)

Validates an alpha value

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="alpha" value="qwerty">
</span>
<div id='pax.validate.validators.alpha.example1'></div>
[:.
    $('pax.validate.validators.alpha.example1').innerHTML = 'Is this only alpha chars?: ' + pax.validate.validators.alpha( $('alpha') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.numeric

pax.validate.validators.numeric = function(field,
mask)

Validates a numeric value

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="numeric" value="123456">
</span>
<div id='pax.validate.validators.numeric.example1'></div>
[:.
    $('pax.validate.validators.numeric.example1').innerHTML = 'Is this only numeric chars?: ' + pax.validate.validators.numeric( $('numeric') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.alphaNumeric

pax.validate.validators.alphaNumeric = function(field,
mask)

Validates an alpha numeric value

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="alphaNumeric" value="123456">
</span>
<div id='pax.validate.validators.alphaNumeric.example1'></div>
[:.
    $('pax.validate.validators.alphaNumeric.example1').innerHTML = 'Is this only alphaNumeric chars?: ' + pax.validate.validators.alphaNumeric( $('alphaNumeric') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.len

pax.validate.validators.len = function(field,
mask)

Validates length of a field

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="len" value="12345">
</span>
<div id='pax.validate.validators.len.example1'></div>
[:.
    $('pax.validate.validators.len.example1').innerHTML = 'Is this only len chars?: ' + pax.validate.validators.len( $('len'), { minLen: 4, maxLen: 6 } );
:]

Private usage, this will validate the fields value.

pax.validate.validators.len

Validates length of a field

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<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.validate.validators.exclude.example1').innerHTML = 'Is this a valid option?: ' + pax.validate.validators.excludeSelect( $('exclude'), { exclude: [0] } );
:]

Private usage, this will validate the fields value.

pax.validate.validators.range

pax.validate.validators.range = function(field,
mask)

Validates range of the value of a field

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="rangeField2" value="30">
</span>
<div id='pax.validate.validators.range.example1'></div>
[:.
    $('pax.validate.validators.range.example1').innerHTML = 'Is this within range?: ' + pax.validate.validators.range( $('rangeField2'), { min: 20, max: 40 } );
:]

Private usage, this will validate the fields value.

pax.validate.validators.notEmpty

pax.validate.validators.notEmpty = function(field,
mask)

Validates contents of a field

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<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.

Example

<span>
    <input type="text" id="notEmptyField2" value="12345">
</span>
<div id='pax.validate.validators.len.example2'></div>
[:.
    $('pax.validate.validators.len.example2').innerHTML = 'Is this field not empty?: ' + pax.validate.validators.notEmpty( $('notEmptyField2') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.postcode

pax.validate.validators.postcode = function(field,
mask)

Validates an Australian post code

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="postcode" value="2444">
</span>
<div id='pax.validate.validators.postcode.example1'></div>
[:.
    $('pax.validate.validators.postcode.example1').innerHTML = 'Is this a valid postcode?: ' + pax.validate.validators.postcode( $('postcode') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.luhn

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.

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="number" value="4242424242424242">
</span>
<div id='pax.validate.validators.luhn.example1'></div>
[:.
    $('pax.validate.validators.luhn.example1').innerHTML = 'Is this a valid luhn check digit number?: ' + pax.validate.validators.luhn( $('number') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.imei

pax.validate.validators.imei = function(field)

Validates a IMEI number using luhn algorithm

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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

pax.validate.validators.creditcard = function(field,
mask)

Validates a credit card number; optionally validates card type

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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 );
:]

Example

<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: $('card_type')
            } ],
            hint: 'This must be a valid VISA Credit card number' }
    };
    pax.validate.initValidation( 'valForm', valDict );
:]

Example

<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: $('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

pax.validate.validators.zip = function(field,
mask)

Validates a US Zip code

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="zip" value="90210-5555">
</span>
<div id='pax.validate.validators.zip.example1'></div>
[:.
    $('pax.validate.validators.zip.example1').innerHTML = 'Is this a valid zip?: ' + pax.validate.validators.zip( $('zip') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.domain

pax.validate.validators.domain = function(field,
mask)

Validates domain name

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

Example

<span>
    <input type="text" id="domain" value="pointful.com">
</span>
<div id='pax.validate.validators.domain.example1'></div>
[:.
    $('pax.validate.validators.domain.example1').innerHTML = 'Is this a valid domain?: ' + pax.validate.validators.domain( $('domain') );
:]

Private usage, this will validate the fields value.

pax.validate.validators.ajaxValidate

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.

Parameters

fielda form field we want to validate

Returns

trueboolean if the field validation passes, false otherwise

Example

<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.

When validating, the server request hits the action of the form (‘../pax.validate.example.validation.php’), with the following parameters

ajaxValidate1
method’notes’
formName’valForm’
fieldName’notes’
fieldValue’These are my notes’ (or whatever notes are in the field)

The server side function will then return the following values (in a JSON object) to the <pax.validate.ajaxValidateCallBack> method

errorstring (if a validation error occured, it will contain a message that will be displayed for 5 seconds)
formName’valForm’
fieldName’notes’
validFieldboolean (if the field is valid, it will be true)

pax.validate.initValidation

pax.validate.initValidation = function(formName,
valDict)

Initialises all form variables, and sets validation events

Example

<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.

pax.validate.validators.ip = function(field,
mask)
Validate an ip address, also checks for optional port number
pax.validate.validators.email = function(field,
mask)
Validate an email address
pax.validate.validators.alpha = function(field,
mask)
Validates an alpha value
pax.validate.validators.numeric = function(field,
mask)
Validates a numeric value
pax.validate.validators.alphaNumeric = function(field,
mask)
Validates an alpha numeric value
pax.validate.validators.len = function(field,
mask)
Validates length of a field
pax.validate.validators.range = function(field,
mask)
Validates range of the value of a field
pax.validate.validators.notEmpty = function(field,
mask)
Validates contents of a field
pax.validate.validators.postcode = function(field,
mask)
Validates an Australian post code
pax.validate.validators.luhn = function(field,
mask)
Validates a number with the luhn algorithm.
pax.validate.validators.imei = function(field)
Validates a IMEI number using luhn algorithm
pax.validate.validators.creditcard = function(field,
mask)
Validates a credit card number; optionally validates card type
pax.validate.validators.zip = function(field,
mask)
Validates a US Zip code
pax.validate.validators.domain = function(field,
mask)
Validates domain name
pax.validate.validators.ajaxValidate = function(field,
mask)
Validates via an ajax call.
pax.validate.initValidation = function(formName,
valDict)
Initialises all form variables, and sets validation events
Close