HTML5 Validation Demo

With up to date browsers and HTML5 we can now have simple, quick and easy form validation which we can implement with minimal effort and also style with CSS.

 
So how do we do this ?? Lets build a simple form like above ...


<form class="form">
    <h1>Sign up here</h1>
       <label>Name:</label>
        <input type="text" required="required" />
        <label>Email Address:</label>
        <input type="email" required="required" />
        <input type="submit" value="Submit" />
    </form>


The form wont actually send an email or anything but its the basic layout.

To get the HTML5 validation to work notice the -- required="required" mark up ! This simply tells the browser that these fields are required to be correct before an email or login can be carried out.  The browser has built in validation so will process what the user inputs and then will spit out a error message if the user inputs something wrong.

We do not have to style the error messages, each browser produces there own, which is kinda cool, but also annoying as we can't style these bubbles yet so they match across all platforms and browsers, but i'm sure this will come eventually.

CHECK OUT THE DEMO HERE

This is the CSS code for your information

.form {
background: #3f4c6b; /* Old browsers */
background: -moz-linear-gradient(top, #3f4c6b 0%, #3f4c6b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4c6b), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f4c6b 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f4c6b 0%,#3f4c6b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f4c6b 0%,#3f4c6b 100%); /* IE10+ */
background: linear-gradient(to bottom, #3f4c6b 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
border-radius:10px;
height:250px;
margin:30px auto;
width:450px;
}
.form > h1 {
padding:10px;
}
label {
display:block;
float:left;
line-height:24px;
margin:5px 0px 20px 10px;
width:120px;
}
input[type="text"] {
border:none;
border-radius:2px;
display:block;
float:right;
margin:5px 20px 20px 0px;
padding:4px;
width:275px;
}
input[type="email"] {
border:none;
border-radius:2px;
display:block;
float:right;
margin:5px 20px 20px 0px;
padding:4px;
width:275px;
}
input[type="submit"] {
background: #f2f5f6; /* Old browsers */
 background: -moz-linear-gradient(top,  #f2f5f6 0%, #c8d7dc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f2f5f6 0%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f2f5f6 0%,#c8d7dc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f2f5f6 0%,#c8d7dc 100%); /* IE10+ */
 background: linear-gradient(top,  #f2f5f6 0%,#c8d7dc 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
border-top:1px solid #1f2849;
border-bottom:1px solid #1f2849;
border-left:1px solid #363b4e;
border-right:1px solid #363b4e;
border-radius:3px;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
box-shadow: inset rgba(255,255,255,0.7) 0px 1px 1px, #1d2130 0px 1px 1px;
color:#444;
cursor:pointer;
display:block;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
margin:120px 0px 0px 145px;
padding:5px 10px;
text-shadow:#fff 0px 2px 1px;
text-transform:uppercase;
}
input[type="submit"]:hover {
background: #e5e5e5; /* Old browsers */
 background: -moz-linear-gradient(top,  #e5e5e5 1%, #b2c0c4 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5e5e5), color-stop(100%,#b2c0c4)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #e5e5e5 1%,#b2c0c4 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #e5e5e5 1%,#b2c0c4 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #e5e5e5 1%,#b2c0c4 100%); /* IE10+ */
 background: linear-gradient(top,  #e5e5e5 1%,#b2c0c4 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#b2c0c4',GradientType=0 ); /* IE6-9 */
border:1px solid #000;
}
input[type="submit"]:active {
background: #b5b5b5; /* Old browsers */
 background: -moz-linear-gradient(top,  #b5b5b5 1%, #b2c0c4 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#b5b5b5), color-stop(100%,#b2c0c4)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #b5b5b5 1%,#b2c0c4 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #b5b5b5 1%,#b2c0c4 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #b5b5b5 1%,#b2c0c4 100%); /* IE10+ */
 background: linear-gradient(top,  #b5b5b5 1%,#b2c0c4 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#b2c0c4',GradientType=0 ); /* IE6-9 */
box-shadow: inset rgba(0,0,0,0.4) 0px 1px 1px;
text-shadow:#fff 0px -1px 3px;
}