Remove HTML5 validation constraints temporarily
Are you annoyed by the brand new HTML5 feature allowing to add validation constraints for your forms on the client side without Javascript?
As a web developer, this is an awesome feature. The most common usage is the
required attribute.
<input type="text" required="required" />
With this simple attribute, if the user leave this field empty, he will be warned, the field become red or whatever the browser do and the form can’t be submitted.
BUT as a web developer, this is a very annoying feature, and it can even lead
to errors. As we are not able to submit half filled forms anymore,
we increase the chances of screwing the server side validation (the most important one).
(And that’s a call for all the Symfony2 developers out there,
as all the form input are required by default, do not forget to
test your forms server side validation!)
So I read the specification and discovered the novalidate
attribute. Added on the form, it tell the browser to bypass
validation on submit.
To test our server side form validation, we just have to add this attribute
on the form elements – and what’s better than a browser extension to do that?
Here is my Chrome extension to remove HTML5 validation on the fly, it’s a 5 lines script but having a button in the browser toolbar is very convenient. Enjoy!