The validation of forms in the web page is one of the characteristics more used.
At the beginning the clients used to validate JavaScript
, now this is easier with
the combination of specifications and the technology of HTML5
.
We must have present that it still has a few drawbacks because it isn’t compatible with some browsers, however in the future it could be very useful so we should know and consider it.
The 'required' attribute
If you include the attribute required inside the element <input>
, automatically it is
obligatory to fill.
<input type="text" name="name" required=""/>
When you find an error of validation the browser by defect will run, normally appears a small alert (tooltip) which contains a warning text. If you add the attribute title in the lable <input>, you can extend the information displayed.
<input title="A name is required" type="text" name="name" required=""/>
How to validate an email field
It’s very easy to validate an email you only have to indicate what kind of input it is, the browser by its own will do it.
<input type="email" name="email" required=""/>
The attribute 'pattern' and the kinds of inputs
With required you only need any value in the element <input> to validate it, but if you use
together the attribute pattern
, you can check the value, if it has a form, a longitudeor a specific
kind of information. This last thing you can determine a patron with regular expressions.
In the next example we create a field that must have between 1 and 6 values.
<input type="text" name="name" pattern="\S{1,6}" required=""/>
New types of input with html5 ...
color date datetime datetime-local email month number range search tel time url week
Programs used in the validation tests
Operating System: Windows Vista
Browser: Google Chrome version 44