Be carefull when using input type=”url”

by Michael Scharnagl

Over the last weeks I became somehow frustrated with the HTML input type “url”. While going through registration forms, I often got the error message “Please enter a valid url” after filling in www.justmarkup.com.

As a developer, I immediately looked at the source code and was not surprised to find that they used the required attribute in combination with type=”url”.


<label for="url">Url:</label>
<input type="url" required aria-required="true" name="url"/>

What’s going on here

As I was curious now, I opened the form with Opera (the browser with the most advanced HTML5 Forms Support) and found out that www.justmarkup.com validates just fine. (Note: By checking the ValidityState via “element.validity.typeMismatch” it returns true in Opera as well.). Therefore I tried to find some tests about how browsers handle validation of input type=”url” in combination with required, and as I couldn’t find one I made some by myself, which can be found here.. All tested browsers won’t validate “url”, “url.de” and “www.url.de”, but all the other tested values, strangely also “url:”.

I couldn’t find any reference in the w3 docs about when an url is defined as valid or invalid. If you found one, please let me know via twitter as I would be highly interested if the browser manufacturer have integrated it the wrong way or if the spec may be misleading.

Let’s fix this

Fortunately we can quite easily fix the wrong browser behaviour by adding a pattern attribute. I am sure there may be a better Regex, but mine is “^(https?://)?([a-zA-Z0-9]([a-zA-ZäöüÄÖÜ0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$”. The main part is from html5pattern.com, I just added the (https?://)? part and support for “umlaute”. I made a test here and as you can see it validates all the values I want it to. If you have a better Regex please share it in the comments.


<label for="url">Url:</label>
<input type="url" required aria-required="true" pattern="^(https?://)?([a-zA-Z0-9]([a-zA-ZäöüÄÖÜ0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$" name="url"/>

Conclusion

All in all it’s really annoying that we, as developers, have to fix, in my opinion “wrong” browser behaviour. Thankfully, it’s easy to change the behaviour and I really encourage everybody to add the pattern part to avoid frustration for your users.

Update 07-01-13

Rodney Rehm just commented a way better and safer regular expression than the one I used. Thanks.

One thought on “Be carefull when using input type=”url”

  1. Rodney Rehm says:

    Be careful when posting regular expressions for URL validation. You’re most likely going to mess things up. See http://rodneyrehm.de/t/url-regex.html#imme_emosol for a working expression

Michael Scharnagl

Portrait Michael Scharnagl

Follow me: @justmarkup

Subscribe to RSS: /feed

A freelance front-end developer focusing on HTML5, CSS, progressive enhancement and web performance.