HTML5 Native Validation
<input type="text" required />
<form novalidate></form> //disable validation
<input type="email" > //no validation
<input type="email" required> //required+email validation
input:invalid{ //invalid pseudoelement set by browser
color:#c33;
border-color:#c33;
}
input:focus:invalid{
box-shadow: 0px 0px 5px red;
}
//No javascript interactivity
input:valid + .invalid { /* Adjacent sibling selector */
visibility: hidden;
}
input:invalid + .invalid {
visibility: visible;
}
input:required {
border-bottom: 2px solid #c33;
}
input:valid {
border-bottom: transparent;
}