I created an input with the following mark-up:
<input name="contactEmail" type="email" required>
I added a CSS class for input:invalid
which gives it a red border, and then tested it by inputting a@a
as the value, and the field was marked valid. Why would that be a valid input for this when it's clearly not a valid email? Regarding valid values for an input of type email
, MDN says:
In simple terms, this means username@domain.tld
But this obviously doesn't match any regex designed to look for that pattern. So...what gives?
Edit:
According to MDN, this is algorithm used for email validation in compliant browser:
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
I haven't broken that apart yet, but a@a
does indeed match it. So I guess the question becomes why does the regex all that to match?