Extended example

This example expands on the original example, and adds validation to our form.

<form name='valForm' method='post'>

    <label for='name'>Name</label><input name='name' id='name' type='text' value=''/><br/>

    <label for='email'>Email</label><input name='email' id='email' type='text' value=''/><br/>

    <label for='dob'>Date of birth</label><input name='dob' id='dob' type='text' size='30' value=''/><br/>

    <button type='submit'>Save</button>

</form>

As you can see, once again it is a standard form, with no special markup. Our script is also very straight forward:

pax.load.onloaded( function() {

    pax.widget.datePick.init( $('dob'), { dateFormat: 'd-m-Y', validate: true } );

    pax.validate.initValidation( 'valForm', {

        'email': { mask: 'email' },

        'name': { mask: 'notEmpty' }

    } );

} );

The validation initialisation ensures that if we type in an email, it is a correct address, and that we MUST enter a name. You should note that the validation does not require you to enter an email address, but if you do, it must be a valid email address.
The example above is rendered here:

Read on for an even more complex example!