Is JavaScript Validation Necessary any More?

One of the useful things that HTML 5 introduced is changes to input fields to allow for types to be more specific and to allow pattern matching to be done from the HTML itself. Basically you can now specify a lot of validation of form fields in the HTML rather than needing to use JavaScript.

Some of the new input types simply change the appearance of the input field while others add validation. It is the ones that add validation that we are interested in here.

The most commonly used input field that has a new type is "email". A field of this type is allowed to contain one or more email addresses and in browsers that recognise the new type it performs at least basic validation to check that what the field contains at least look somewhat like email addresses. In fact there is nothing to stop future browsers from providing full validation of the email addresses for these fields without any changes to your code being required.

Other fields that also have built in validation based on the type include "url", "number" (which also allows you to specify min, max and step attributes to define the valid range for the numbers and the increment to use in browsers that display it as a spinner control), "range" (which also has min and max attributes but displays as a slider rather than an input field), "date" (which allows a minimum and maximum date to be specified and often displays a date picker to make entry easier), "month", "week", "time", "datetime", "datetime-local" and "color". With all of these field types the type already implies much of the required validation and the min and max attributes that some of these allow take care of much of the rest.

All form fields can now also be given a pattern attribute. This attribute is used to add regular expression support directly into HTML. Instead of having to use JavaScript to do pattern matching of the input using a regular expression you can now specify the pattern directly in the HTML itself.

Between the new types and the extra attributes you can now specify most of the individual field validations that you need directly in the HTML. This just leaves the more complex individual field validations and cross field validations that can't be done by the HTML. In a lot of cases cross field validation isn't needed and the individual field validations are no more complex than can be handled by the new HTML and so relying on just the HTML validations is certainly possible for many forms.

What happens though if someone uses an antiquated browser that doesn't support the new HTML? Well, this is no different from someone visiting the form with the validation done in JavaScript but where they have turned off or don't have JavaScript. Having the browser based validation of the form not run has always been a possibility and having it not run because the browser doesn't recognise the new HTML is no different from having it not run because JavaScript is off. The browser based validation is only there for the convenience of the person filling out the form and can't be relied on. You need server side validation in order to ensure that what your visitor has entered is valid regardless of any client side validations applied and this is no different now than it was before when browser validations could only be done with JavaScript.

Enough browsers do support the new HTML validations to make it perfectly reasonable to use that for the form field validations done in the browser and to not bother with a JavaScript version of the validation at all.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate