Skip to content
input-validity

Custom messages

Sometimes it’s better to provide own translation instead of browser’s defaults which are automatically set to user’s language. You might want to do set custom messages for:

  • consistent translation - user might change app’s language
  • more specific error messages

This can be achieved with input-validity by using message-* attributes.

<form action="/submit">
  <input
    type="text"
    required
    validation-message="#error"
    message-value-missing="Hey! This field is mandatory."
  />
  <p id="error"></p>
  <button>submit</button>
</form>

It’s also common to use multiple validation rules, for example required email field. For that we will use required with message-value-missing and type="email" with message-type-mismatch.

<form action="/submit">
  <input
    type="email"
    required
    validation-message="#error"
    message-value-missing="This field is mandatory."
    message-type-mismatch="Incorrect email address."
  />
  <p id="error"></p>
  <button>submit</button>
</form>

You can find complete list of supported message-* attributes here.