Home » HTML5 » HTML5 based Form validation without JavaScript

HTML5 based Form validation without JavaScript

Posted on April 13th, 2012

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.

Live Demo

HTML Code

[html]
<!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>
[/html]

CSS Code

[css]
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;}
[/css]

Download Code

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.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

  • admin

    Thanks.

  • http://bit.ly/Ihv70B Get #1 in Google

    Good write-up. I look forward to looking at a lot more from you.

  • http://whatdoesmynamemeans.com/ my name

    Good read. Shared on FB :)

  • http://www.klasnmvgh67as.com Damaris Fragozo

    You need to participate in a contest for among the finest blogs on the web. I will suggest this site!

  • http://www.amazon.com/s/url=search-alias%3Daps&field-keywords=xbox+360&tag=lowestprices1-20 xbox 360 fifa 11

    Located your post pretty remarkable in fact. I definitely liked reading it and you make very some fantastic points. I am going to bookmark this website for your foreseeable future! Relly terrific content.

  • MA

    Great script. Is it possible to do it without the pop up “please fill out this field” window?

    Thanks

    • http://www.w3resource.com/ w3resource

      You may use JavScript/Jquery to create a new paragraph containing the message.

  • usha

    hi! after working on it..i found these validations are browser specific and i can’t able to replicate same on emulator…help me out..i need all these validations to work on emulators..

    • http://www.w3resource.com/ w3resource

      Yes, depending upon the browser, the messages displayed on error (and the style associated) are different. Which emulator you want to try?

  • http://www.facebook.com/nitinkumaryadav Nitin Kumar

    very helpful code a lot of thankx

  • Ajit

    thnx my dear for helpfull code

    • http://www.w3resource.com/ w3resource

      Thanks.

      • Ajit

        I want to be use in javascript if i click on button then all check box to be selected please give me the solution of that problem?

        • http://www.w3resource.com/ w3resource

          Wirte a function to set the attribute to ‘check’ for the checkbox in question. Then call that function on ‘onclick’ event of the button.

  • Hafizur Rahman

    Thanks for easy understanding code

  • nitin kakkar

    Thanks for this code . but i think that for validating email using type = “email” is better and cleaner option .

  • Arun

    how can i add action to this script r if we submit form where it will go?

    • http://www.w3resource.com/ w3resource

      Add action=”yourfile” and submitting the form will send data to “yourfile”.