I have a form in my web app that requires the user to input a url. I've decided to leave the validation for the url input to server for now, but wanted to retain the perks of using the HTML5 url type for mobile device input.
Here's my form code:
While using novalidate on the form allows me to submit invalid urls that are caught by the server validation, the input:focus:invalid:focus is still be triggered and appears to be using the default HTML5 regex validation for urls which is one or more letters followed by a colon.
Screen capture of the form with no input:
Screen capture of the form with invalid input:
Screen capture of the form with valid input according to the default regex for url validation in HTML5 (I think?):
My question is why is the input:focus:invalid:focus being triggered when novalidate is being used? I assume this may be expected behavior that I don't understand.. What is the recommended best practice for ensuring that input:focus:invalid:focus is not triggered - i.e. I don't want any input validation on the client side - at least not at this time. I'm testing on linux (Ubuntu 12.04) using Chrome version 25.0.1364.172.