Disable validation of HTML5 form elements

Question

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 1

The best solution is to use a text input and add the attribute inputmode="url" to provide the URL keyboard facilities. The HTML5 specification was thought for this purpose. If you keep type="url" you get the syntax validation which is not useful in every case (it is better to check if it returns a 404 error instead of the syntax which is quite permissive and is not of a great help).

You also have the possibility to override the default pattern with the attribute pattern="https?://.+" for example to be more permissive.

Putting the novalidate attribute to the form is not the right answer to the asked question because it removes validation for all the fields in the form and you may want to keep validation for email fields for example.

Using jQuery to disable validation is also a bad solution because it should absolutely work without JavaScript.

In my case, I put a select element with 2 options (http:// or https://) before the URL input because I just need websites (and no ftp:// or other things). This way I avoid typing this weird prefix (the biggest regret of Tim Berners-Lee and maybe the main source of URL syntax errors) and I use a simple text input with inputmode="url" with placeholders (without HTTP). I use jQuery and server side script to validate the real existence of the web site (no 404) and to remove the HTTP prefix if inserted (I avoid to use a pattern like pattern="^((?http).)*$" to prevent putting the prefix because I think it is better to be more permissive)

Answer 2

I had a read of the spec and did some testing in Chrome, and if you catch the "invalid" event and return false that seems to allow form submission.

I am using jquery, with this HTML.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

I haven't tested this in any other browsers.

Answer 3

You could install simple chrome extension and just disable validation on the fly https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

by default everything will work as default, but you will be able to disable html5 validation with single click on extension icon on toolbar