What makes this work?
This sample is driven by two major parts:
- A collection of property sets for fields with validation built in for different types of data
- A script which checks those fields on the server side (called validate)
Let's take the email field as an example:
On the client side
The email property set defines an onchange event which tests the value of the input using regex. If the test fails (the value is invalid) a class of error-field is added to the input and it's container to highlight its invalidity.
In addition to this, the email property set defines the input's type atrribute to be "email". This prompts mobile devices to adjust their keyboard to suit entering an email address but some browsers also implement their own validation for email inputs.
On the server side
A determined user might work around your best client side validation; if we really want to ensure valid data we also have to write validation on the server side.
To achieve this, we add the validate script to the submit/continue/next page button of the form which uses modifiers (also defined in the property sets) to identify fields of each type and validate them using the same criteria as the client side code. If any field fails validation here we add the same error-field class as earlier and we write an instructional error message before stopping the event.