Le 30/05/2013 dans DevBlog

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?

HTML5 Validation on Chrome

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!