Your pattern does not allow for lowercase characters.
See http://www.w3.org/TR/html5/forms.html#the-pattern-attribute
The pattern is compiled with the ignoreCase flag disabled.
Try this instead: pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$"