With newer browsers that support HTML5 client side validation, Google Chrome (16+), Mozilla Firefox (8+), and Internet Explorer (10+). You can easily take advantage of the required flag and the input validation.
For example, you use the required attribute to require a user to enter a value for an INPUT element. A code example is below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Required Demo</title>
</head>
<body>
<form>
<label>
First Name:
<input required title="First Name is Required!" />
</label>
<label>
Last Name:
<input required title="Last Name is Required!" />
</label>
<button>Register</button>
</form>
</body>
</html>You can see that the value of the title attribute is used to display the validation error message “First Name is Required!”. Unfortunately the title attribute does not work with the current version of Firefox. If you want to display a custom validation error message with Firefox then you need to include an x-moz-errormessage attribute like this:
<input required title="First Name is Required!"
x-moz-errormessage="First Name is Required!" />The pattern attribute enables you to validate the value of an INPUT element against a regular expression. The following is a code example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pattern</title>
</head>
<body>
<form>
<label>
Social Security Number:
<input required pattern="^d{3}-d{2}-d{4}$"
title="###-##-####" />
</label>
<button>Register</button>
</form>
</body>
</html>Please note you need to include both the required and pattern validation attributes.
HTML5 Validation with Older Browsers
There are several jQuery plugins which can provide partial support for the HTML5 validation attributes including:
· jQuery Validation — http://docs.jquery.com/Plugins/Validation
· html5Form — http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html
· h5Validate — http://ericleads.com/h5validate/
The jQuery Validation plugin – the most popular JavaScript validation library – supports the HTML5 required attribute, but it does not support the HTML5 pattern attribute. Likewise, the html5Form plugin does not support the patternattribute.
The h5Validate plugin provides the best support for the HTML5 validation attributes. The following page illustrates how this plugin supports both the required and pattern attributes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>h5Validate</title>
<style type="text/css">
.validationError {
border: solid 2px red;
}
.validationValid {
border: solid 2px green;
}
</style>
</head>
<body>
<form id="customerForm">
<label>
First Name:
<input id="firstName" required />
</label>
<label>
Social Security Number:
<input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
title="Expected pattern is ###-##-####" />
</label>
<input type="submit" />
</form>
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.h5validate.js"></script>
<script type="text/javascript">
// Enable h5Validate plugin
$("#customerForm").h5Validate({
errorClass: "validationError",
validClass: "validationValid"
});
// Prevent form submission when errors
$("#customerForm").submit(function (evt) {
if ($("#customerForm").h5Validate("allValid") === false) {
evt.preventDefault();
}
});
</script>
</body>
</html>When an input field fails validation, the validationError CSS class is applied to the field and the field appears with a red border. When an input field passes validation, the validationValid CSS class is applied to the field and the field appears with a green border.