Html form validation leads to an inconsistant user experience

Question

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.

Answer 1

Use both methods, just make them look the same. It's not the difference in client-side vs server-side the tester/user notices, it's the different text, position and markup. Not the method, but the endresult.

So just style your server-side message like the client-side one; text bubble floating over the field with a red outline.

Answer 2

If you made the e-mail input box have type="text", the browser won't validate it and only the server will.

Answer 3

I think this question is more a code than an UX one, but you could easily do this:

var email = document.getElementById("mail");

email.addEventListener("keyup", function (event) {
  if(email.validity.typeMismatch) {
    email.setCustomValidity("Please enter a valid email");
  } else {
    email.setCustomValidity("");
  }
});

Additionally, you could check the Constrain Validation API that will help you to customize validation messages and states as needed