Extended form with widgets

/*
    To add a custom validator, simply define a function in the pax.validate.validators object
    that takes a field as parameter, and returns true if the value is valid, and false if not.
   
    The below validator ensures that a field contains a valid Australian NSW based phone number.
    That means it starts with 02 and is exactly 10 numbers long. It does not allow country code.
*/
pax.validate.validators.nswPhone = function( field ) {
    var validField = true;
    // Remove spaces, open brackets and close brackets
    var myNumber = field.value.split(' ').join('').split('(').join('').split(')').join('');
    // We should now have a 10 digit number, starting with 02. If not, then this is not a valid field
    if( myNumber.substr(0,2) != "02" || myNumber.length != 10 || ( ! myNumber.match(/^[0-9]+$/gi) ) )validField = false;
    return validField;
};
   
valDict = {
    'firstName': {
        mask: [
            { mask: 'len', minLen: '2', maxLen: '20' }
        ],
        hint: 'First name is not necessary, however it must be at least 2 chars, and no more than 20 chars, if entered'
    },
    'lastName': {
        mask: 'notEmpty',
        hint: 'You must specify a last name'
    },
    'logon': {
        mask: [
            { mask: 'len', minLen: 3 },
            { mask: 'alphaNumeric' },
            { mask: 'ajaxValidate', method: 'logon' },
            { mask: 'notEmpty' },
        ],
        hint: 'logon must be at least 3 chars, and is validated via the server to ensure it is available. Try characters such as <b>%</b>, or <b>john</b> to see it in action.'
    },
    'dob': {
        hint: 'Enter a date; you can type dates such as <br/><b>\'today +3weeks\'</b> or <br/><b>\'next friday\'</b> or click on the date selector icon, and navigate to your desired date.'
    },
    'email': {
        mask: [
            { mask: 'email' },
            { mask: 'notEmpty' }
        ],
        hint: 'The email address is mandatory, and must be a valid email address'
    },
    'phone': {
        mask: [
            { mask: 'nswPhone' },
            { mask: 'notEmpty' }
        ],
        hint: 'The phone number MUST be an Australian NSW phone number, ie: start with <b>02</b>, and be a total of 10 chars long'
    },
    'country': {
        mask: 'notEmpty',
        hint: 'You must select a rugby team'
    },
    'postcode': {
        mask: 'postcode',
        hint: 'Australian post code (4 numbers)'
    },
    'language[]': {
        mask: [
            { mask: 'len', maxLen: 3, minLen: 1 },
            { mask: 'notEmpty' },
        ],
        hint: 'You must specify at least 1, but no more than 3 spoken languages'
    },
    'ipaddress': {
        mask: [
            { mask: 'ip' },
            { mask: 'notEmpty' }
        ],
        hint: 'This should be a valid IP Address. Can specify a port, with <b>:[port number]</b>'
    },
    'level': {
        mask: 'notEmpty',
        hint: 'You must specify a level',
        hintPos: { x: 78, y: 0 }
    },
    'code': {
        freemask: 'SSSS-NN',
        hint: 'If you enter a value, it must be in the format: SSSS-NN'
    },
    'domain': {
        mask: [
            { mask: 'domain' }
        ],
        hint: 'You may specify a domain, eg: <b>pointful.com</b>, but it is not mandatory'
    },
    'notes': {
        mask: [
            { mask: 'ajaxValidate', method: 'notes' },
            { mask: 'notEmpty' }
        ],
        hint: 'Notes are checked for "bad words" using a custom ajax validation routine on the server, try entering <b>fibble</b> to see it work.'
    }
};
   
pax.load.onloaded( function() {
    pax.validate.initValidation( 'valForm', valDict );  //    Iinitialise form validation
    pax.widget.datePick.init( $('dob'), 'd-m-Y' );    //    Iinitialise datePicker widget for 'dob' field. Note: this is a 'validating' widget.
} );