Disable validation of HTML5 form elements

Answer 1

Instead of trying to do an end run around the browser's validation, you could put the http:// in as placeholder text. This is from the very page you linked:

Placeholder Text

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.

You’ve probably seen placeholder text before. For example, Mozilla Firefox 3.5 now includes placeholder text in the location bar that reads “Search Bookmarks and History”:

When you click on (or tab to) the location bar, the placeholder text disappears:

Ironically, Firefox 3.5 does not support adding placeholder text to your own web forms. C’est la vie.

Placeholder Support

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Here’s how you can include placeholder text in your own web forms:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Browsers that don’t support the placeholder attribute will simply ignore it. No harm, no foul. See whether your browser supports placeholder text.

It wouldn't be exactly the same since it wouldn't provide that "starting point" for the user, but it's halfway there at least.

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.

<input type="url" value="http://" />

<script type="text/javascript">
<!-- // suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
    return false;
});
// -->
</script>

I haven't tested this in any other browsers.

Answer 3

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

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

See http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate