HTML and CSS Reference
In-Depth Information
Write a script to detect support for
required
and
pattern
and define alternate form
handling if support is not available:
<script>
if (!Modernizr.input.required || !Modernizr.input.pattern) {
$('form').submit(function() {
var validData = true;
$('[required], [pattern]').each(function() {
if (($(this).attr('required') !== false) && ($(this).val() == "")){
$(this).focus();
alert("The " + $(this).attr('name') + " field is required!");
validData = false;
return false;
}
if ($(this).attr('pattern')){
var regexp = new RegExp($(this).attr('pattern'));
if (!regexp.test($(this).val())){
$(this).focus();
alert("The data in the " + $(this).attr('name') +
" field isn't in the right format!");
validData = false;
return false;
}
}
});
return validData;
});
}
</script>
Discussion
We've been validating forms with JavaScript for about 15 years, so there are plenty of
ways to require form field completion and to validate data. What's new about this
solution is that it leverages the HTML5 form attributes
required
and
pattern
to
establish the rules for validation, and the JavaScript simply keys off of them. In the
recent past, developers have used the
rel
attribute to perform a similar style of valida-
tion, but this is no longer necessary (nor is it valid HTML5).
Again, when all of your users have upgraded to browsers that natively support HTML5
form validation, you'll be able to quickly and easily remove the scripts without needing
to change your markup.
See Also
Smashing Magazine
's listing of best practices and tutorials for web form validation at
