Client-Side Form Validation

'Hint' functionality

'Hint' functionality is the tradition of having certain fields already set with a value that lets the user know what data the field is expecting.

For an example of what I mean by "hint" functionality please click on any of the form fields below and you'll notice the text that is prefilled into each form field disappears (for the user to enter their own value).

If the user doesn't enter a value (so the field is left blank) then the original 'hint' value is placed back into the field value.

---

Form Field Validation

This component can validate the following types of data...

• full name (allows first name{minimum of 3 characters}, middle name and surname)
• email address
• UK telephone number
• age (maximum of 3 numerical digits)
• date (in the format of dd/mm/yyyy)
• credit card

...all other form fields requested to be validated are checked to make sure their value attribute contains data of some kind.

If there are any errors in the form then they are displayed above the first form field found in the page (test this by simply clicking on the 'submit' button below without changing any of the form field values)

'Copy' functionality

The 'copy' function allows the user to copy field values from one set of fields (the source) to another set of fields (the destination).

See the below example, "Is the delivery address the same as the invoicing address").

Once a set of field values has been copied (from the source), the source fields are then disabled to prevent accidental changes.

If the user clicks back onto the "no" radio button then the source fields are re-enabled and the destination field values are returned back to what they were originally also.