HTML 5 Control Field Automatic Validation
HTML5 Basics - Part 22
Forward: In this part of the series, we look at HTML 5 Control Field Automatic Validation.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
What is Field Validation?
A user may type an email address into an email input control field. Validation here means checking whether the user has type the email address according to the rules governing an email address. For example, if the user forgot to type the @ sign, it means the email address is not valid. If the email address were, john@yahoo.com and the user typed, mary@yahoo.com, the validation process will not be able to detect the deference, since all rules have been respected. The validation process must be able to check if the rules for typing email address were respected, for example checking if the @ and the dot are present. So validation involves checking the syntax of the value typed.
Validation means checking if what has been typed is valid and then issuing an error message if there was a mistake. In many cases if an error occurred, the validation process would prevent the form from being submitted.
Automatic Validation of HTML 5
The email, URL, number, and datetime fields are supposed to be automatically validated by the browser.
Focus
When the blinking I-bar is inside a field at the browser, that field is said to have focus. When the blinking I-bar is out of the field, the field is said to have lost focus. You can make a field loss focus by clicking out of it. There are other focus indications, but I will not go into that.
For the email, URL, number and datetime fields, when the field losses focus after having text, validation is automatically and immediately done. With my browser, if the field content (value) is not valid, a red-like border develops around the field to indicate that the field is not valid.
Simple Validation
The fields mention above and other fields can be left empty and the form will still be submitted. The automatic validation verifies if the syntax of what has been typed is correct. It does not verify if the field is empty. On the other hand, simple validation simply checks whether a field is empty or not. You, the coder is the one to indicate to the browser, whether or not a field should be verified for emptiness (simple validation).
If you want a field to be verified for emptiness, type the attribute, required, in the tag of the field. The attribute, required, does not take a value. Its presence means the browser should do simple validation for the field. Its absence means the browser should not do simple validation. It is a Boolean attribute.
Simple validation is independent of the syntax validation for the email, URL, number or datetime fields. Simple validation can be used for any field including these.
Simple validation is done when the submission process for the form begins. If text were required (i.e. the required attribute was present) for a field and it was not typed in by the user, then the form will not be submitted and the browser will indicate the error.
No simple validation is done for the following fields, but syntax validation is done for the URL field by default:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<input type= "url" name= "engine" list= "englist"><br>
<textarea name="message" cols="30" rows="3"></textarea>
</body>
</html>
Simple validation is done for all the fields below, because each has the attribute, required. Syntax validation is still done for the URL field by default.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<input type= "url" name= "engine" list= "englist" required ><br>
<textarea name="message" cols="30" rows="3" required></textarea>
</body>
</html>
That is it for this part of the series. We stop here an continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT