How to validate HTML5 forms without JavaScript
Posted: Fri May 18, 2012 4:46 pm
Most of the people still don't that it is possible to validate HTML5 forms without JavaScript. Without talking much, here is a sample HTML code with CSS.
HTML
CSS
HTML
Code: Select all
<!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. alphabets 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. alphabets 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. alphabets 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. Sri Lankan 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>
CSS
Code: Select all
h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label{
float: left;
clear: left;
width: 100px;
text-align: rightright;
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;}