Disable HTML5 form validation with novalidate

One of the most useful things the HTML5 doctype provides developers is the ability to validate form inputs ‘inline’—validation performed by a user’s browser, with no reliance on JavaScript and to the W3C standard. This article isn’t about how to wield the new types: plenty of people have done an excellent job of that already. Instead, we’re going to take a brief look at how to disable this validation on an ad-hoc basis when we want to test our server side validation logic.

Why?

Primarily because of The Golden Rule of web development: never trust user input. Much like the hackneyed efforts of JavaScript client side validation from years gone by, HTML5 validation should only ever be considered a nicety and should never be used as authoritative validation. It takes very little effort to create any type of HTTP request from something other than a web browser—be it maliciously or not—which completely side steps any validation implied by a form’s inputs. Older browsers (you know the ones) don’t even support the new input types, so a user doesn’t even have to be doing anything malicious in order to bypass your client side validation.

How?

Thankfully the HTML5 spec provides an easy way to disable form validation on a form by form basis, so you don’t have to remove the relevant attributes on every input each time you want to verify your server side validation from your browser. By adding the novalidate attribute to the form in question your browser will ignore any validation associated with the inputs it contains and you’ll be able to verify that your server side logic is not only handling validation correctly but is also presenting the correct feedback to the user.

Introducing: novalidate!

Whilst of course your server side validation and any feedback it provides in the event of failure should ideally be covered by automated tests, I’ve found myself wanting to manually verify this behaviour frequently enough that I grew tired of having to add novalidate to my forms during development (not to mention the risk of leaving it in and deploying code without it). Similarly, after deploying updates to live websites (such as this one) I like to run a few manual form submissions through as a sort of belt-and-braces assertion to make sure everything’s working as expected.

To that end one cold winter’s day last year I knocked up a tiny JavaScript bookmarklet to add this attribute to each form on a page, wrapped it up in possibly the smallest GitHub repository ever, and came up with the most original name for it I could: novalidate!

Try it

The following form is lifted straight from this site’s contact page and uses some basic HTML5 validation in the form of required fields and a mandatory email address. Note that when you do submit it after disabling inline validation, the request will be submitted via AJAX as per the rest of the forms on this site—but you are hitting the appropriate server side logic.

In a browser which supports HTML5 validation, try submitting the form with missing or invalid data. You’ll see your browser’s implementation of the W3C specification:

Now simply click the link below, the href attribute of which is a very simple JavaScript bookmarklet:

novalidate!

When resubmitting the form you’ll now bypass the HTML5 validation: the form will submit and cause the server side validation to kick in, reject the submission and present the appropriate feedback. It doesn’t look the same but that’s acceptable since in reality users will only see one or other feedback mechanism in normal use.

To actually make the bookmarklet useful, simply drag it into your bookmarks toolbar: you can now click it on any page containing HTML5 validation to bypass it, such as the contact page on this site, or any of the comments forms following each article.

Use it

Okay, you don’t have to—but if you spend as much time working with forms as I do, you might just find it saves you some time particularly when performing quick checks on live sites. Of course, feel free to check out the GitHub repository (for what it’s worth) and point anyone wrestling with the same issue to novalidate.com.

Comments

There are currently no comments - feel free to add one!

Add a comment

Your email address won’t be published you’ll never be sent any spam. Your IP address is captured for auditing purposes and your comment will be moderated before it appears.