Attribute <input type=“email”> doesn't validate properly in HTML5

Question

I have been using HTML5's new input types for easier validation. I have noticed a problem (tested on Chrome, but not sure about other browsers) that doesn't make much sense. If I was to place michael in my email field it will come up saying that it needs to be a valid email, fantastic, but when I try michael@test and don't have the extension, it validates properly.

What I would like to know is, is this a bug or done on purpose?

I would also like to point this problem out to people who use it in the future and think it works 100%.

Fortunately I run Laravel's own email check which works perfectly, but why wouldn't Chrome or anyone at the W3 Consortium not know of this problem? It could be quite a risk to rely on this 100% and thinking that people are using valid email addresses from this input type.

Answer 1

michael@test is a valid email address in that it is formatted in a valid manner. A valid email address naturally does not mean that the email address is able to receive messages or that your mail daemon can even send messages to it.

The W3C working group note on input type=email says that the match criteria is any string that matches the following regular expression:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Thus, ^_^"@666.42.99- is also considered a valid email address by that criteria, though the host part of the address is clearly invalid.

Unfortunately, there is no other way to positively and conclusively verify the validity of an email address but a send a verification message there and ask for user action based on the content of that message.

The HTML 5 validation is still pretty good at ensuring that you did not type your telephone number or address by accident in the email field; but any client data should always be considered possibly invalid and untrusted and rechecked at the server side anyway.