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.