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=""/>
					
make a required field

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=""/>
					
a name is 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=""/>
						
validate a field email

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

Reviews

Name

Email

Comment