How to validate HTML5 forms without JavaScript

Web hosting, SEO, etc... related
Post Reply
User avatar
Saman
Lieutenant Colonel
Lieutenant Colonel
Posts: 828
Joined: Fri Jul 31, 2009 10:32 pm
Location: Mount Lavinia

How to validate HTML5 forms without JavaScript

Post by Saman » 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

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;} 
 
User avatar
viddz
Sergeant Major
Sergeant Major
Posts: 45
Joined: Fri Aug 26, 2011 6:06 am
Location: Colombo

Re: How to validate HTML5 forms without JavaScript

Post by viddz » Fri May 18, 2012 7:03 pm

whoah its really important script. Thanks for shairing.
healdprice
Corporal
Corporal
Posts: 3
Joined: Tue Aug 12, 2014 2:26 am

Re: How to validate HTML5 forms without JavaScript

Post by healdprice » Wed Aug 20, 2014 3:53 pm

yes, great example, but don't forget about some attributes like: novalidate. It can bring much headache like it was in my case when I wanted to upgrade my website with HTML5 form validation. Fortunately, I found the article where I learned such things: form validation using HTML5. Such attribute will be useful in the case when you need to have cancel or discard button.
User avatar
SemiconductorCat
Major
Major
Posts: 455
Joined: Mon Aug 22, 2011 8:42 pm
Location: currently in hyperspace

Re: How to validate HTML5 forms without JavaScript

Post by SemiconductorCat » Thu Oct 23, 2014 12:38 am

Somewhere I've read that it's not good to use attributes in HTML5.
So is there any way to do the same thing without using attributes but only css ? Just to know.

One another question,
According to how I feel , I think validation belongs to the behavior of the page. So then it should belongs to
HTML code. What you think ? Is that belongs to style or structure ? BTW there's no behavior in HTML where it only
implemented with Javascript and JS is belongs to html <script> </script> tag.
So another argument that supports my view.
User avatar
Herath
Major
Major
Posts: 417
Joined: Thu Aug 05, 2010 7:09 pm

Re: How to validate HTML5 forms without JavaScript

Post by Herath » Sun Nov 09, 2014 12:19 pm

SemiconductorCat wrote:Somewhere I've read that it's not good to use attributes in HTML5.
So is there any way to do the same thing without using attributes but only css ? Just to know.

One another question,
According to how I feel , I think validation belongs to the behavior of the page. So then it should belongs to
HTML code. What you think ? Is that belongs to style or structure ? BTW there's no behavior in HTML where it only
implemented with Javascript and JS is belongs to html <script> </script> tag.
So another argument that supports my view.
It is not possible to perform data validations with CSS. They only define rules and styles that will be used by the browser for the page rendering.

Your second question is not clear to me. However, all client side validations cannot be trusted. Server side validation is also a must for important data. Otherwise it is very easy to by pass those client validations and enter incorrect or malicious data.
Post Reply

Return to “Web Related”