[Webkit-unassigned] [Bug 99764] New: input type="url" validation is incorrectly implemented

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=99764

           Summary: input type="url" validation is incorrectly implemented
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Mac OS X 10.8
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Forms
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: mikey.j.clarke at gmail.com


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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.