For client side form validation, using JavaScript is inevitable. But not any more. With HTML5, now you may validate your forms at client side without using any JavaScript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <title>HTML5 based From validation</title> <meta name="keywords" content="form validation, html5" /> <meta name="description" content="HTML5 based form validation" /> <link rel='stylesheet' href='form-validation-without-js.css' type='text/css' /> </head> <body> <h1>User Registration Form</h1> <form name='registration'> <ul> <li><label for="userid">User id :</label></li> <li><input type="text" name="userid" size="12" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" /></li> <li class="help">required. alphanumeric, _, 6 to 12 chars</li> <li><label for="passid">Password :</label></li> <li><input type="password" name="passid" size="12" required pattern="(?=^.{5,12}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" /></li> <li class="help">required. alphanumeric, upper & lower case, special chars, 5 to 12 chars</li> <li><label for="username">Name :</label></li> <li><input type="text" name="username" size="30" required pattern="[a-zA-Z ]+"/></li> <li class="help">required. alphabates only, space allowed</li> <li><label for="country">Country :</label></li> <li><input type="text" name="country" size="12" required pattern="[a-zA-Z]+" /></li> <li class="help">required. alphabates only.</li> <li><label for="city">City :</label></li> <li><input type="text" name="city" size="12" required pattern="[a-zA-Z]+" /></li> <li class="help">required. alphabates only.</li> <li><label for="zip">Postal Code :</label></li> <li><input type="text" name="zip" required pattern="[0-9]{6}" /></li> <li class="help">required. Indian Postal Code format only- six digit number.</li> <li><label for="email">Email :</label></li> <li><input type="text" name="email" size="30" required pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" /></li> <li class="help">required. Must be a valid email pattern.</li> <li><label for="desc">Terms & condition :</label></li> <li><textarea name="desc" id="desc" readonly> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat, quam volutpat viverra pulvinar, diam orci pretium arcu, ac dictum libero mauris et leo. Nam arcu urna, interdum nec scelerisque nec, iaculis vel nibh. Nam a mauris elit. Proin in libero purus. Sed elementum magna blandit dui tincidunt sollicitudin. Nullam fringilla semper nulla ac sollicitudin. Donec ultricies euismod nunc ac sagittis. Sed sit amet sapien eu massa lacinia vehicula et nec urna. </textarea></li> <li><label>I Agree</label></li> <li><input type="checkbox" name="tc" /></li> <li><input type="submit" name="submit" value="Submit" /></li> </ul> </form> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
h1 { margin-left: 70px; } form li { list-style: none; margin-bottom: 5px; } form ul li label{ float: left; clear: left; width: 100px; text-align: right; margin-right: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; } form ul li input, select, span { float: left; margin-bottom: 10px; } form textarea { float: left; width: 350px; height: 150px; } [type="submit"] { clear: left; margin: 20px 0 0 230px; font-size:18px } .help { color: silver; float: left; margin-left: 6px; } input[type="checkbox"] {outline: 5px solid red; margin-top: 10px;} input[type="checkbox"]:checked {outline: 5px solid green; margin-top: 10px;} |
Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark and subscribe with our Feed. And use our comment section to say what you think about.
Subcribe to our RSS Feed