Search code examples
javascriptjqueryhtmlrequired

How to change html5 pattern error messages for email


Html5 required attribute adds normally the error message "Please fill out this field." and it can easily be changed with the following code

oninvalid="setCustomValidity('Custom text in another language..')" 
oninput="setCustomValidity('')"

However, I have noticed that when I use inputs with type email I still get messages such as "Please enter a part following '@." and "Please include an '@' in the email address", how can I change them?


Solution

  • The custom error message comes from the element's title, or by using setCustomValidity, as you said. But message like "Please include an '@' in the email address" come from the type="email" attribute. There are similar error messages when there is a required attribute, for example. So these messages come from the browser, and will be in the user's browser language. I wouldn't worry too much about this, as the browser will already be in a language the user understands, and as they are native to the browser, users will get used to these standard error messages.