Client-side web form validation
While designing a web form intended to collect data from users there are a lot of aspects to be considered regarding the form’s UI, its interactivity and content, ability to catch input errors etc. The most popular approaches to form designs are:
- keeping them short (only include concise and necessary questions) and
- helping the user to fill them in.
The latter deals mostly with form validation and input masking. There are 2 types of validation: client-side and server-side. Validation is the process of checking if the data is in acceptable format. Verification is the process of checking if the data is correct (for example, running the credit card test charge to make sure the number is correct) and if the data is what the user intended to input (password verification).
Server-side validation is necessary before any verification and is done after the form is submitted when the server can send back an error message.
Client-side validation is done by the browser and makes it faster to catch the input errors than waiting for the server to send back a response. The disadvantage of the client-side validation is that it is not supported uniformly among all the browsers and devices and it is hackable (easy to bypass).
There are 2 types of client-side validation: built-in browser validation and inline validation when the user gets feedback while filling out the form before clicking submit.
Inline validation plays a big role in user experience design and can make the process of filling in the form much easier.
Below is an example of using jQuery validation plugin for basic payment form fields.
Include the jQuery library and the jQuery validation plugin. Use CDN or download them
In HTML specify the elements to be validated. They need to have id attributes
Create the Validation Rules
Create error messages
