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?
 
     
    