HTML5 Forms & Validation

by toddanglin

HTML

<h1>HTML5 Forms &amp; Validation</h1>
<form>
    <fieldset>
        <legend>Your Personal Info</legend>
        <ol>
            <li>
                <label for="txtName">Name:</label>
                <input type="text" id="txtName" title="Enter your full name" placeholder="Enter your full name" autofocus required />
            </li>
            <li>
                <label for="txtEmail">Email:</label>
                <input type="email" id="txtEmail" title="Enter a valid email address" placeholder="Enter your email" required />
            </li>
            <li>
                <label for="txtTwitter">Twitter:</label>
                <input type="text" id="txtTwitter" title="Enter your Twitter handle (i.e. @yourname)" placeholder="Enter your Twitter handle" />
            </li>
            <li>
                <label for="rngAwesome">Awesomeness:</label>
                <input type="range" id="rngAwesome" title="How awesome are you?" placeholder="Enter your awesome rating" />
            </li>
            <li>
                <label for="txtAge">Age:</label>
                <input type="number" id="txtAge" title="Please enter your age in years" placeholder="Enter your age" />
            </li>
        </ol>
    </fieldset>
    <button id="btnSubmit">Submit Form</button>
</form>

CSS

/*Validation Styles*/
input:invalid{
    border: solid 1px yellow;
}

input:focus:invalid{
    border: solid 1px red;
    outline: auto 5px #777; 
    outline-offset: 1px;   
}

input:valid{
    border:solid 1px green;   
}


body{
    background:#333;
    font: 1.1em/1.3em Helvetica,Arial,sans-serif normal;   
    color:#FFF;
}

h1{
    font-size:1.5em;  
    margin: .5em 0; 
}

li{
    margin:.75em 0;   
    clear:both;
}

fieldset{
    padding:1em;
    border:solid 1px #BBB;  
    border-radius:5px;
}

label{
    display:inline-block;
    width:120px;  
}

input{
    font-size:1.1em;   
}

input{
    border-radius:5px;   
}

input[type="submit"]{
    background-image: -webkit-linear-gradient(#EEE, #AAA);
    border: solid 1px #777;
    padding:.25em;
    cursor: pointer;
    margin: .5em 0;
}

input[type="submit"]:hover{
    background-image: -webkit-linear-gradient(#EEE, #DDD);
}

JavaScript

$(function(){
    var validNames = ["@toddanglin","@kendoui","@telerik"];
    
    $("#txtTwitter").bind("blur", function(){
       //Manually set validity
        
       var ele = document.getElementById("txtTwitter"),
           val = ele.value;

        console.log(ele.validity);
        
        if(val === null || validNames.indexOf(val) < 0) {            
            ele.setCustomValidity(""); 
        }else{
            ele.setCustomValidity("That name is already taken"); 
        }
                       
    });
    
    $("#btnSubmit").bind("click", function(){
       //Manually validate form
       var form = $("form")[0];
        if(form.checkValidity()){
            alert("Yay! Form is good.");
        }else{
             alert("Oops! Check your input.");   
        }
           
    }); 
});