HTML5 Form Validation like a boss!
The times of long and boring javascripts for form validation ends now!
I decided long ago to move on HTML5 form validation way for small contact form, easier and lighter than javascript but expecially effective on mobile devices with low performances.
I’ll be quick and explain some of the shining features of this kind of form validation:
Input have many more options now, check them:
- required is the nicest tag, no more js checks and if, just required for a field that could not be blank. Sweet.
- type=”email” one of the many types that HTML5 supports, we have number, url, tel, date and many more! Check w3schools.
- pattern is the new regular expression lord, we could create fields like pattern=”https?://.+” for websites or pattern=”[A-z ]{3,}” for names. Supersweet!
- min=”1″ max=”99″ for input type number could be useful as much as maxlength=”10″.
- placeholder=”Your username here” is fancy and helpful, give a tips on the field without wasting time on CSS.
Time to make some test fields! Remeber that HTML5 requires this tag:
<!DOCTYPE HTML> <HTML> ... ... </HTML>
We’re ready now.
<form action="#" method="post">
<input type="text" name="client_name" required pattern="[A-z ]{3,50}"
placeholder="Insert your full name"/>
<input type="email" maxlength="40" name="client_email" required
placeholder="Insert your email"/>
<input type="text" name="client_birth" pattern="\d{1,2}/\d{1,2}/\d{4}"
placeholder="Insert your date of birth (dd/mm/yyyy or mm/dd/yyyy)"/>
<input type="url" name="client_linkedin" pattern="https?://.+"
placeholder="Insert your linkedin profile page here" />
<input type="text" name="payment" required pattern="\d+(\.\d{2})?"
placeholder="Insert the payment amount" />
<input type="submit" value="Send this stuff"/>
</form>
Simplest method on earth to validate a form, don’t you agree?
Remember to add:
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
fdsafa