The great thing about form validation is that it can be easy or complex to fix—it all depends on the route we take to solve the issues.
The key point here is that we can use jQuery to provide form validation; this is a perfectly adequate solution that will work. However, for the simple validation of fields, such as names or e-mail addresses, there is an alternative: HTML5 validation, which uses the HTML5 constraint validation API.
Note
The constraint validation API makes use of HTML5 attributes such as min, step, pattern, and required; these will work in most browsers, except Safari.
Before I explain the logic within this madness, let's take a quick look at how to modify our demo in order to use this form of validation:
Open up a copy of the
basicform.htmlfile in your usual text editor and then look for this line:<li> <label for="name">Name:</label> <input type="text" name="username" required> </li>
We need to add the pattern...