Example of Form Validation with HTML5
March 30, 2014
"email" Input Type in HTML5
In user form, to take the user email we need to validate to check if email format is correct like @ is there are not. To achieve it just use email input type and we are done.<!DOCTYPE html> <html> <body> <h4>email Demo in HTML5</h4> <form action=""> E-mail: <input type="email" name="uemail"> <input type="submit"> </form> </body> </html>
Test now. Try to enter wrong format of email then you will not be able to submit the form.
"url" Input Type in HTML5
HTML5 provides url input type using which the field will be validated for the URL. If user inputs wrong URL format, then the form will not be submitted. To achieve this validation, we need to use input type url.<!DOCTYPE html> <html> <body> <h4>url Demo in HTML5</h4> <form action=""> URL: <input type="url" name="urlvalidation"> <input type="submit"> </form> </body> </html>
Test now. Try to enter wrong format of URL then you will not be able to submit the form.
"number" Input Type in HTML5
To input number from a user within a range, use number input type. Suppose if form needs validation to enter value between 5 to 10, then HTML5 supports very easy way to do it. Define number input type and use min and max attribute and you are done.<!DOCTYPE html> <html> <body> <h4>number Demo in HTML5</h4> <form action=""> Enter Number Between 5 to 10: <input type="number" min="5" max="10" name="num"> <input type="submit"> </form> </body> </html>
Test now. Try to enter value less than min or more than max, you will not be able to submit the form.
"tel" Input Type in HTML5
HTML5 provides tel input type to validate telephone number. Just use tel input type and you are done.<!DOCTYPE html> <html> <body> <h4>tel Demo in HTML5</h4> <form action=""> Telephone Number: <input type="tel" name="telephone"> <input type="submit"> </form> </body> </html>
Test now