http://www.sitepoint.com/using-the-html5-constraint-api-for-form-validation/ - done reading
https://www.sitepoint.com/html5-form-validation/
http://www.html5-tutorials.org/form-validation/how-validation-works/
- Parsley - free
- http://www.formvalidator.net/ - free, multi-langual
- https://jqueryvalidation.org/
- http://validatejs.org/
- http://1000hz.github.io/bootstrap-validator/
- http://alfredobarron.github.io/smoke/
- http://formvalidation.io/ - 50$
- http://jaymorrow.github.io/validatr/
- http://lab.hasanaydogdu.com/validetta/ - This is the one that I end up using. It seems to be the best.
- http://validity.thatscaptaintoyou.com/
How can we validate email address using HTML5 way?
<input type=”email” />
How can we validate URL using HTML5 way?
<input type=”URL” />
How can we validate a pattern using HTML5 way?
<input type=”text” pattern=”[1-4]{5}” />
The pattern attribute is used to specify a regular expression and the field value must match this pattern. This attribute can be used with input types like text, password, email, url, tel and search. For example, The following HTML snippet uses a pattern attribute for an input field. When the form is submitted, validation is performed on the input field. As a result, a value like ABCD won’t pass the validation, in this case. When using the pattern attribute, the ^ and $ for the start and end of the regular expression are implied and don't need to be included.
How can we mark a field as required using the HTML5 way?
Use the required attribute:
<input type=”text” required />
How can we validate maximum length?
Use the maxlength attribute:
<input type=”text” maxlength=”20” />
How can we validate minimum length?
Use the minlength attribute:
<input type=”text” minlength=”20” />
How can we validate the the password field and the confirm password field actually match using HTML5 way?
We need to attach an onchange listener to password fields. The following snippet shows the HTML form.
<form name="ValidationForm">
Password: <input type="password" id="password1"/>
Confirm Password:<input type="password" id="password2"/>
<input type="submit" value="submit"/>
</form>
Whenever a change event is fired, we need to check if both of the passwords match. If yes, we call setCustomValidity() on the input element (password field in this case) with an empty string as the argument. This means that the password field is marked as valid and therefore when the form is submitted there will be no validation error. On the other hand, if we detect that the passwords don’t match in a change event we call setCustomValidity() with an error message as argument. It means the password field will be marked as invalid and the error message will be shown when the user submits the form.
The following JavaScript implements this logic:
<script type="text/javascript">
function validatePassword() {
var pass2=document.getElementById("password2").value;
var pass1=document.getElementById("password1").value;
if(pass1!=pass2) {
document.getElementById("password2").setCustomValidity("Confirm password does not match with password.");
} else {
document.getElementById("password2").setCustomValidity('');
//empty string means no validation error
}
}
$(document).ready(function(){
$('#password1').change(validatePassword);
$('#password2').change(validatePassword);
})
</script>
How can we validate number using HTML5?
<input type="number"/>
How can we make sure that the number that the user provided be in a certain range?
Use the min and max attribute:
<input type="number" min="1" max="4"/>
How can we use CSS to highlight required fields?
Use the :required pseudo-class CSS class. CSS3 gives us some new pseudo-classes we can use to provide visual clues to the user as to which form fields are required, which are optional, and which contain validation errors.
Required fields can use the :required pseudo-class:
input:required {
background:hsl(180, 50%, 90%);
border:1px solid #999;
}
Optional fields can use the :optional pseudo-class:
input:optional {
background:hsl(300, 50%, 90%);
border:1px dotted hsl(180, 50%, 90%);
}
The success or failure of form validation can be signified to the user through the use of the :valid, :invalid, :in-range, and :out-of-range pseudo-classes:
input:valid,
input:in-range {
background:hsl(120, 50%, 90%);
border-color:hsl(120, 50%, 50%);
}
input:invalid,
input:out-of-range {
border-color:hsl(0, 50%, 50%);
background:hsl(0, 50%, 90%);
}
How can we disable browser-based validation?
You can disable the built-in browser validation by adding a novalidate attribute to your <form> tag:
<form novalidate>
…
</form>
