Disable validation of HTML5 form elements

validation forms html input
nickf picture nickf · Jun 22, 2010 · Viewed 310.2k times · Source

In my forms, I'd like to use the new HTML5 form types, for example <input type="url" /> (more info about the types here).

The problem is that Chrome wants to be super helpful and validate these elements for me, except that it sucks at it. If it fails the built-in validation, there's no message or indication other than the element getting focus. I prefill URL elements with "http://", and so my own custom validation just treats those values as empty strings, however Chrome rejects that. If I could change its validation rules, that would work too.

I know I could just revert back to using type="text" but I want the nice enhancements using these new types offers (eg: it automatically switches to a custom keyboard layout on mobile devices):

So, is there a way to switch off or customise the automatic validation?

Answer

Jakob S picture Jakob S · Jun 22, 2010

If you want to disable client side validation for a form in HTML5 add a novalidate attribute to the form element. Ex:

<form method="post" action="/foo" novalidate>...</form>

See https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Related questions

HTML5 form required attribute. Set custom validation message?

I've got the following HTML5 form: http://jsfiddle.net/nfgfP/ Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". How would I change that default message to "This field cannot …

Read More
How to Call a JS function using OnClick event

I am trying to call my JS function that I added in the header. Please find below code that shows my problem scenario. Note: I don't have access to the body in my application. Everytime I click on the element …

Read More
HTML5 form validation pattern alphanumeric with spaces?

I have the following input tag in my html5 form: <p> <label>Company Name*</label> <input type="text" name="name" class="field" required pattern="[a-zA-Z0-9]+" /> </p> This works just …

Read More