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.
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.
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:
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.
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.