Bug 99764 - input type="url" validation is incorrectly implemented
Summary: input type="url" validation is incorrectly implemented
Status: RESOLVED DUPLICATE of bug 29235
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified OS X 10.8
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2012-10-18 15:27 PDT by Mikey Clarke
Modified: 2012-10-18 22:53 PDT (History)
1 user (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Mikey Clarke 2012-10-18 15:27:16 PDT
Inputing a URL in the format "www.example.com" into an input type="url" fails to pass validation; instead it is required that URLs are entered with the protocol, i.e. "http://www.example.com".

In Webkit browsers that give error notices when a form fails validation, such as Chrome, this means that form submission is blocked until the user corrects the error. In Chrome, the error notice does not even specify that the lack of a protocol is the reason for failure, it just asks for a valid URL. In Webkit browsers that have implemented CSS form validation states, such as Safari and Chrome, the :invalid state applies to the field when it contains a URL lacking a protocol.

This is a serious usability issue. To an ordinary user, www.example.com _is_ the URL; they are highly unlikely to provide the protocol in the first instance, and quite possibly will still not think to do this after seeing the non-specific validation error notice on the field. For developers, this means that we must either not use type="url" or attach the 'novalidate' attribute to the form when we do so so that we can protect our users from this behaviour.

While the spec does require that absolute URLs, including the protocol, be used for validation, Ian Hickson clarified for me on the WHATWG list (http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-October/037629.html) that the correct way to implement this is to convert 'www.example.com' to 'http://www.example.com'. Opera is the only browser I know of to currently implement it this way, though I've yet to test IE10.

I've tested this in both the latest Webkit Nightly, Chrome 22 and Mobile Safari on iOS6. Since Safari doesn't notify of validation errors, I used the CSS :invalid state to test both the Nightlies and Mobile Safari.

Example: http://codepen.io/mikeyclarke/full/znbyK
Comment 1 Kent Tamura 2012-10-18 22:53:11 PDT

*** This bug has been marked as a duplicate of bug 29235 ***