While you should always validate data on your servers, additional validation of data on the Web page itself has multiple benefits. By validating form data while the user is filling it out, the user can know immediately if they've made any mistakes; this saves the time of waiting for an HTTP response and saves your server from dealing with bad form input.
This article covers how to validate form data within your form's Web content.
In this example, we are going to validate the name and password.
The name can’t be empty and password can’t be less than 6 characters long. The user will not be forwarded to the next page until given values are correct.
Because the code is stored within the page or within a linked file, it is downloaded into the browser when a user accesses the page and, therefore, doesn't require a roundtrip to the server.
For this reason, client form validation can be faster than server-side validation.
However, client-side validation may not work in all instances.
For example, you may want to ensure that someone inserts a valid e-mail address into a text box, or perhaps you want to ensure that someone fills in certain fields.
However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class or As you can see, the HTML is almost the same; we just removed the HTML5 parts.