Validate Forms using HTML5

Step 1. HTML

This is our main source file with our form. I decided to create some ‘Join form’ to website using HTML5:

    
    




    

        

            
General Info

            

                Username:
                
            

                First Name:
                
            

                Last Name:
                
            

                Password


                Confirm Password
            

                Email:
                
            


            
Miscellaneous Info

            

                Select
                
                    
                    Single
                    Couple
                
            

                Sex:
                 Male
                 Female
            

                Phone:
                
            

                Website:
                
            

                Description:
                
            

                Upload photo:
                
            

                Subscription:
                 Subscribe to our news
            

                Agreement:
                 I have read and agreed with Terms of Use.
            


            

                

                    
                

Here are important notes. HTML5 using several new attributes as rules for validation of form fields. This is:

• required – this attribute will transform field into required field. This attribute applicable to different form elements (input, select, textarea etc). So if we will mark our field with this attribute, it will mean that we will need to check our checkbox field, type value for text field, select value from selector etc.
• pattern – this attribute will determinate regular expression which will using for checking values of elements. In our example I will use this attribute to set custom pattern for email and phone fields.
• maxlength – we can use this attribute to set max limit of symbols for field

Step 2. CSS

All styles here:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:700px;font-size:80%;border:1px #000 solid;margin:10px auto;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}

form{font-size:100%;min-width:560px;max-width:620px;width:590px;margin:0 auto;padding:0}
form fieldset{clear:both;font-size:100%;border-color:#000;border-style:solid none none;border-width:1px 0 0;margin:0;padding:10px}
form fieldset legend{font-size:150%;font-weight:400;color:#000;margin:0;padding:0 5px}
label{font-size:100%}
label u{font-style:normal;text-decoration:underline}
input,select,textarea{font-family:Tahoma, Arial, sans-serif;font-size:100%;color:#000}
textarea{overflow:auto}
form div{clear:left;display:block;width:354px;zoom:1;margin:10px 0 0;padding:1px 3px}
form div fieldset{clear:none;width:197px;border-color:#666;border-style:solid;border-width:1px;margin:0 0 0 144px;padding:0 5px 5px}
form div fieldset legend{font-size:100%;padding:0 3px 0 9px}
form div label{display:block;float:left;width:130px;text-align:right;margin:0 0 5px;padding:3px 5px}
form div.optional label,label.optional{font-weight:400}
form div img{float:left;border:1px solid #000;margin:0 0 5px}
form div input.inputFile{width:211px}
form div.submit{width:214px;padding:0 0 0 146px}
form div.submit div{display:inline;float:left;text-align:left;width:auto;margin:0;padding:0}
form div.required fieldset legend,form div.required label,label.required{font-weight:700}
form div select,form div textarea,form div input.inputText,form div input.inputPassword{width:200px;margin:0;padding:1px 3px}

:valid {box-shadow:  0 0 5px green}
:-moz-submit-invalid {box-shadow:  0 0 5px pink}

 

Step 3. JS

We will using one easy function for password validation in this file

js/main.js

function validatePass(p1, p2) {
    if (p1.value != p2.value || p1.value == '' || p2.value == '') {
        p2.setCustomValidity('Password incorrect');
    } else {
        p2.setCustomValidity('');
    }
}

Reference site : http://www.script-tutorials.com/data-validation-html5/