Disabling Chrome’s Obnoxious HTML5 Form Validation

Has anyone else been bitten by this recently? You’re making a form for your website, and you need to collect the user’s email address. Rockstar web developer that you are, you use Google Chrome to test, and you’re using the fancy new HTML5 <form> tags. You maybe have something like:

<form id="signupForm" method="POST"><code>
<input id="email" name="email" type="email" />
<input id="passwd" name="passwd" type="password" />
<input id="confirm" name="confirm" type="password" />

And then you go to test out your form in Chrome. You type in a bogus email address to test your server-side input validation.

And when you hit enter to submit the form, you see this:

Where did this come from!?! Chrome apparently tries to do its own form validation. Which is great I guess, but not when you want to do your own custom validation.

Luckily, this is easily disabled using the “novalidate” attribute in the <form> element, like so:

<form id="signupForm" method="POST" novalidate>