Input Type URL - Says "Please enter a URL" if HTTP is not included

Question

I've been working on a form and run into a snag. I've been using input type="url" so that iPad and iPhones etc all pull up the correct keyboard - and to try and follow the new standards.

I've run into an issue though. On a form where the web address is not required - if a user types in www.theiraddress.com most browsers outline it in red/yellow to notify the user they need to enter "http://" before it.

I've used input:invalid css to remove that outline.

However now when the user submits the form, the browser throws an error saying "Please enter a URL".

The field isn't required - I just wanted to make it easier for folks to enter their addresses - but still display the right keyboards on mobile devices etc.

Is there a way to remove this annoying tooltip that prevents users from submitting the form?

Answer 1

You can add a novalidate attribute to the form element. Fx:

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

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

Taken from this answer: https://stackoverflow.com/a/3094185/1497627

Answer 2

As far as I know, according to the standard, the protocol is required (Url input field implementation state). You could alternatively use a regexp to validate that field such as /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}(\/)?/i

Answer 3

According to the bottom of the referenced page (http://www.wufoo.com/html5/types/3-url.html) you can use the text input type and the inputmode attribute (http://www.wufoo.com/html5/attributes/23-inputmode.html) to get to the keyboard on mobile devices without being fussy about the text field.