There are a lot of cool client side validation options in HTML, and even more now in HTML5.
While these don't change the amount of server side validation required, they give an instantaneous feedback loop to the user for basic mistakes, basic mistakes where there is need to wait for the user to submit the form before warning them.
However, I recently received a bug about an inconstant user experience on this input field:
<input type="email"/>
The tester had tried two different invalid email addresses, resulting in this:
Caught by the browser based on the type attribute:
Caught by my server side code:
Here's the problem. The tester/user was surprised that the messages would be different. I can only agree, that despite the advantages, it is an inconstant user experience, which evidently has lead to user surprise (a bad thing). Have I therefore made a poor design choice?
My response to this bug has to respond briefly to the client with the pros and cons of browser validation and I'll implement it in the way they decide. But if I have to give advice on which is best, what should I say?
Note: I've avoided discussing writing my own JavaScript validation as I consider it old fashioned, more brittle than the html approach, and all together to much effort. But I would get more control, so perhaps I'm wrong.