Complex example

This example once again expands on the previous example, and adds further validation to the form.

<form name='valForm' method='post' action='../examples/getting_started_example3.php'>

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

    <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. We added an action attribute, to specify a target for our form; the action script is also used for validating the login, as you will see in our script:

pax.load.onloaded( function() {

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

    pax.validate.initValidation( 'valForm', {

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

        'name': { mask: [

            { mask: 'alpha' },

            { mask: 'notEmpty' },

            { mask: 'len', minLen: 2 }

        ] },

        'login': {

            mask: [

                { mask: 'len', minLen: 3 },

                { mask: 'alphaNumeric', 'whiteSpace': false },

                { mask: 'ajaxValidate', method: 'login' },

                { mask: 'notEmpty' },

            ],

            hint: 'Login must be at least 3 chars, no spaces, and is validated via the server to ensure it is available.'

        }

    } );

} );

The validation now ensures the name is alpha, with at least 2 characters. The new field (login) is validated via the action script 'getting_started_example3.php', which is shown below:

<?php

//  PAX ajax login validation example

$formName = $_REQUEST['formName'];

$fieldName = $_REQUEST['fieldName'];

$fieldValue = $_REQUEST['fieldValue'];

$validField = true;

$errMessage = '';

// We would of course normally load the names from a database...

foreach( array( 'andrew', 'bob', 'james', 'john', 'mikkel' ) as $k => $v ) {

    if( strtolower($v) == strtolower($fieldValue) ) {

        $errMessage .= "Login <b>" . $fieldValue . "</b> has already been registered.<br>";

        $validField = false;

    }

}

print "{'formName': '" . $formName . "', 'fieldName' : '" . $fieldName . "', 'validField' : '" . $validField . "', 'error' : '" . $errMessage . "'}";

?>

The example above is rendered here, try entering john in the Login box, to see the ajax validation in action: