How to create custom validation message html

HtmlHow-ToBeginner · 3 min read

How to Create Custom Validation Message in HTML Forms

To create a custom validation message in HTML, use the setCustomValidity() method on form input elements. This method lets you set your own message that appears when the input is invalid, replacing the browser's default message.

📐

Syntax

The setCustomValidity() method is called on an input element to set a custom validation message. If the message is an empty string, the input is considered valid.

element.setCustomValidity(message): Sets the custom message.
message: A string with your custom error message or an empty string to clear it.

html

<input id="myInput" type="text" required>

<script>
  const input = document.getElementById('myInput');
  input.setCustomValidity('Your custom error message here');
</script>

💻

Example

This example shows a text input that requires at least 5 characters. If the user enters fewer, a custom message appears instead of the default browser message.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Validation Message Example</title>
</head>
<body>
  <form id="form">
    <label for="username">Username (min 5 chars):</label>
    <input id="username" name="username" type="text" required minlength="5">
    <button type="submit">Submit</button>
  </form>

  <script>
    const username = document.getElementById('username');
    const form = document.getElementById('form');

    username.addEventListener('input', () => {
      if (username.validity.tooShort) {
        username.setCustomValidity('Username must be at least 5 characters long.');
      } else {
        username.setCustomValidity('');
      }
    });

    form.addEventListener('submit', (e) => {
      if (!username.checkValidity()) {
        e.preventDefault();
        username.reportValidity();
      }
    });
  </script>
</body>
</html>

Output

A form with a text input labeled 'Username (min 5 chars):' and a Submit button. If you type fewer than 5 characters and try to submit, a popup message says: 'Username must be at least 5 characters long.'

⚠️

Common Pitfalls

Not clearing the custom message with setCustomValidity('') when the input becomes valid causes the error to persist.
Setting the custom message outside of event handlers can cause the message to show even before user interaction.
For accessibility, always use semantic HTML and labels.

html

<!-- Wrong: custom message never cleared -->
<input id="email" type="email" required>
<script>
  const email = document.getElementById('email');
  email.setCustomValidity('Please enter a valid email.');
</script>

<!-- Right: clear message on input -->
<input id="email2" type="email" required>
<script>
  const email2 = document.getElementById('email2');
  email2.addEventListener('input', () => {
    if (!email2.validity.valid) {
      email2.setCustomValidity('Please enter a valid email.');
    } else {
      email2.setCustomValidity('');
    }
  });
</script>

📊

Quick Reference

setCustomValidity(message): Set or clear custom error message.
validity: Object with validation states like valid, tooShort, typeMismatch.
reportValidity(): Shows the validation message popup.
Use event listeners like input to update messages dynamically.

✅

Key Takeaways

Use setCustomValidity() on input elements to show custom validation messages.

Always clear the custom message with setCustomValidity('') when input is valid.

Use event listeners like input to update validation messages dynamically.

Call reportValidity() to display the message when needed, such as on form submit.

Keep your HTML semantic and accessible with proper labels.