HTML oninvalid Attribute

Introduction

The oninvalid attribute is an inline event handler that runs JavaScript when the invalid event fires — when a form control fails HTML5 constraint validation. That happens when a field breaks rules like required, min, max, pattern, or type="email", usually when the user tries to submit the form. Use it with setCustomValidity() to show friendly error messages, and clear custom validity on oninput so the field can become valid again. Prefer visible inline errors over alert(). Pair with novalidate on the form only if you replace browser validation entirely.

What You’ll Learn

Purpose of oninvalid Attribute

The primary purpose of oninvalid is to respond when a form field does not meet its validation constraints. Instead of a generic browser tooltip, you can set a clear message with setCustomValidity(), highlight the field, or reveal an error paragraph. This makes validation feedback easier to understand — especially for beginners filling out a form for the first time.

The browser runs validation when the user submits a form (unless novalidate is set). If any control is invalid, submission is blocked and the invalid event fires on each invalid field. Your handler runs at that moment — a good place to customize the message or update the UI.

📝 Syntax

Set oninvalid on a validatable form control:

<input type="text" id="username" required
  oninvalid="setUsernameError()"
  oninput="this.setCustomValidity('')">

<script>
  function setUsernameError() {
    document.getElementById("username").setCustomValidity(
      "Username is required."
    );
  }
</script>

Syntax Rules

• Value is JavaScript executed when the invalid event fires.
• Works on validatable elements: input, textarea, select.
• Typically fires on form submit when a constraint fails (not on every keystroke).
• Use setCustomValidity(message) for custom text; clear with setCustomValidity("").
• JavaScript: element.oninvalid = function() { … }.
• Modern alternative: element.addEventListener("invalid", handler).
• The invalid event does not bubble in all cases the same way — attach to each field or use capture on the form.

💎 Values

The oninvalid attribute accepts a string of JavaScript code:

• oninvalid="showError(this)" — Pass the invalid element.
• oninvalid="this.setCustomValidity('Required')" — Inline custom message.
• JavaScript: field.oninvalid = () => { … } assigns the handler.

const email = document.getElementById("email");

email.addEventListener("invalid", () => {
  email.setCustomValidity("Please enter a valid email address.");
});

email.addEventListener("input", () => {
  email.setCustomValidity("");
});

Applicable Elements

oninvalid vs oninput vs reportValidity()

Examples Gallery

Required field custom message, addEventListener, and pattern validation with inline errors.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" required
    oninvalid="this.setCustomValidity('Username is required.')"
    oninput="this.setCustomValidity('')">
  <input type="submit" value="Submit">
</form>

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

<script>
  const field = document.getElementById("dynamicField");

  field.addEventListener("invalid", function () {
    field.setCustomValidity("This field is invalid. Please provide a valid input.");
  });

  field.addEventListener("input", function () {
    field.setCustomValidity("");
  });
</script>

<input type="password" id="pwd"
  pattern=".{8,}" required
  oninvalid="this.setCustomValidity('Password must be at least 8 characters.')"
  oninput="this.setCustomValidity('')">

♿ Accessibility

• Use inline errors, not alert() — Blocking dialogs are hard for screen reader and keyboard users.
• Link errors with aria-describedby — Point the input at the error message element id.
• Use aria-invalid="true" — Set when invalid; remove when the field passes validation.
• Associate labels — Every validated field needs a visible <label>.
• Don’t rely on color alone — Show error text, not only a red border.

💡 Best Practices