This is an excerpt from the HTML5 Solutions: Essential Techniques for HTML5 Developers book by Apress (where I'm one of the author).
HTML5 Solution 4-7: Validating form controls
In the first solution in this chapter, we showed you how to use built-in mechanisms to validate an e-mail
input type. This function is new to HTML5.
When you work with forms, validation of data is definitely an important aspect that may require quite a lot
of effort. We often resort to mixed validation systems. With JavaScript or AJAX frameworks (such as
JQuery, Dojo, and MooTools), you can make client-side validations and you can develop server-side
validating procedures with server-side languages (PHP, Python, Java, and so on).
Thanks to the insertion of new attributes in HTML5, you can delegate some data verification functions to
the browser and reduce the effort required for these kinds of operations (at least from the client side).
What’s involved
Some form controls inherit validation systems without having to write any code. In Solution 4-1, we showed
how the validation mechanism for an e-mail type text input works automatically by only declaring the
markup:
<input type="email" />
The same can be said for the URL and number markups, <input type="url"> and <input
type="number">.
There is, however, an attribute that can be used to specify the presence of a compulsory field in a form,
which you can’t leave empty.
To request this kind of validation, you need to use required in the input control:
<input type="text" required />
This attribute is Boolean. When specified, the element is required.
Browsers that support this attribute display an error message or insert a red border on the field that
generated the error and won’t submit the form.
How to build it
For this solution, modify the code from Solution 4-2 by adding the required attribute for two of the three
fields.
Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<title>
Solution 4-7: Validating form controls
</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Solution 4-7: Validating form controls </legend>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Insert your first name" required
/><br/>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Insert your email" required
/><br/>
<label for="blog">Blog</label>
<input id="blog" name="blog" type=url placeholder="Insert your blog"/><br/>
<p>
<input type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
If you open the file and try sending the form without any data in the two required fields, the browser will
not allow you to submit the form if the mandatory fields are empty,
One important aspect regarding the usability of the form suggests that the mandatory fields have to
provide the user with a visual or textual clue informing them of the required data. One convention is to
insert an asterisk (*) symbol next to the required field.
You can add some text and graphic clues with CSS by using the pseudo-classes :valid, :invalid,
:optional, and :required.
A form element is :required or :optional if a value for it is, respectively, required or optional before the
form to which it belongs is submitted.
You can learn more about this topic by reading this article: www.w3.org/TR/css3-ui/#pseudo-validity. All
you have to do is use these pseudo-classes to make the fields more stable. Change the code from before
by adding a <style> block, as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#myForm .required:after { content: " * "; color:red;}
#myForm input:required { background:red; color:white; }
</style>
<title>
Solution 4-7: Validating form controls
</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Solution 4-7: Validating form controls </legend>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Insert your first name" required
/><br/>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Insert your email" required
/><br/>
<label for="blog">Blog</label>
<input id="blog" name="blog" type="url" placeholder="Insert your blog"/><br/>
<p>
<input type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
In the new style block, we have declared two CSS statements. The first acts on the required class and
adds text after the selector with the pseudo-class :after; in our case, a * next to the label element:
#myForm .required:after { content: " * "; color:red;}
The second statement, on the other hand, uses the required pseudo-class on the input tag changing the
background color to red:
#myForm input:required { background:red; }
The only change required in the code is in the tag label, with which you need to associate the :required
class using the attribute class, so it will insert the *:
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Insert your first name" required
/><br/>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Insert your email" required
/><br/>
Once you’ve saved the file and executed it in a browser, you'll see that the CSS pseudo-classes is applied
to the fields.
Expert tips
The built-in validation mechanism of the fields in HTML5 will be applied automatically by default. However,
there are contexts in which it is necessary to use JavaScript to create more complex and robust validation
routines.
In such cases, it is necessary to override the default validation system of the browser.
The novalidate attribute specifies that the form should not be validated when submitted:
<form id="myForm" novalidate>
<fieldset>
<legend>Solution 4-7: Validating form controls </legend>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Insert your first name" required/><br/>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Insert your email" required
/><br/>
<label for="blog">Blog</label>
<input id="blog" name="blog" type="url" placeholder="Insert your blog"/><br/>
<p>
<input type="submit" value="Submit"/>
</p>
</fieldset>
</form>
You can specify this attribute at the form level, as in the example above, or within the following <input>
types: text, search, URL, telephone, e-mail, password, date pickers, range, and color.
Comments