I want to use HTML5 forms for validation but what about older browsers?


The HTML5 forms specification introduces a feature that enables you to let the browser handle validation. However, if you use this feature on your website only browsers that support HTML5 validation will validate the form fields; all the other browsers will just ignore the mark-up and allow invalid forms to be submitted.

Microsoft have created a jQuery Plugin called unobtrusive validation which allows you to use standards HTML5 Forms syntax but will then use JavaScript to make the form validation work in browsers that don’t support HTML5 Form validation. An example of how you would use the library can be found here: http://jsfiddle.net/qxsS8/

Comments (4)

  1. Dave says:

    "Microsoft have created a jQuery Plugin called unobtrusive validation which allows you to use standards HTML5 Forms syntax but will then use JavaScript to make the form validation work in browsers that don’t support HTML5 Form validation."

    –Not really. It uses "data-" attributes valid in html5 but does not generate html5 forms syntax, just html4 syntax with the "data-" attributes….

  2. Raymond Camden says:

    Personally – and this may be a bit mean – but I don't worry about those browsers. Why? Since you have to use server-side validation anyway, I'd rather keep my client-side validation nice and simple for modern browsers.

  3. Ignacio Fuentes says:

    "The HTML5 forms specification introduces a feature that enables you to let the browser handle validation"

    Is that feature being used in the jsfiddle? I dont see it.

  4. Ashley Sheridan says:

    Their code excerpt uses examples of two input elements that don't have any form of HTML5 validation attached to them normally. A better idea would have been at least to use one of the input elements like 'email' or 'number'. The validation is focusing on utilising the data attributes like Dave said, which will mean they fail on browsers that either don't support Javascript or have it turned off, a place where HTML5 validation will still work.

    Of course you can switch those elements to use the new HTML5 types (it seems odd that that hasn't been done in the code example) but then you're just duplicating code. Especially daft when you consider that unrecognised input elements will fall back to the text type anyway.

    Also, do we really need another plugin for this? JQuery form validation plugins have been around since before mainstream browser support for HTML5 form validation, so it makes little sense.