Displaying messages

This is a basic example demonstrating how input-validity can show error messages.

Let’s consider following input with required attribute. Try to submit and you will see the browser’s default popover.

Reload

HTML

<form action="/submit">
  <input type="text" required />
  <button>submit</button>
</form>

You can use input-validity’s attribute validation-message to show the message in a DOM element instead of browser’s default popover.

Reload

HTML

<form action="/submit">
  <input
    type="text"
    required
    validation-message="#error"
  />
  <p id="error"></p>
  <button>submit</button>
</form>