HTML novalidate Attribute

Introduction

The novalidate attribute is a boolean HTML attribute on <form> that disables the browser’s built-in constraint validation on submit. Normally, empty required fields, invalid type="email" values, and other HTML5 rules block submission and show validation messages. With novalidate, the form submits without those browser checks—useful when you implement custom JavaScript validation or rely on server-side validation. It does not remove validation attributes from fields; it only stops the browser from enforcing them at submit time.

What You’ll Learn

Purpose of novalidate Attribute

The primary purpose of novalidate is to turn off native form validation so you control when and how errors appear. Design systems often need consistent custom error UI instead of browser tooltips. Multi-step wizards may validate each step with JavaScript rather than HTML5 on the whole form. Some apps send raw input to the server and display errors from an API response.

The old reference described it as enabling “faster submissions”—that misses the point. Skipping validation does not make legitimate submits faster; it means invalid data can reach your handler unless you validate elsewhere. Always validate on the server regardless of novalidate.

📝 Syntax

Add the boolean novalidate attribute to a <form>:

<form action="/signup" method="post" novalidate>

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" required>



  <label for="email">Email:</label>

  <input type="email" id="email" name="email" required>



  <button type="submit">Sign up</button>

</form>

Syntax Rules

• Boolean attribute—write novalidate alone; presence disables browser validation.
• Valid only on <form>, not on individual inputs.
• Fields keep required, pattern, etc.—you can still call input.checkValidity() in JavaScript.
• JavaScript IDL property: formElement.novalidate = true (boolean).
• For one submit button that skips validation, use formnovalidate on that button instead.
• Pair with custom validation or server checks—never leave data unvalidated.

💎 Values

The novalidate attribute is boolean—not a string value like the old reference suggested:

• novalidate — Attribute present; browser validation disabled on submit.
• novalidate="" — Also valid in HTML5; same as bare novalidate.
• Attribute absent — Default; browser runs constraint validation on submit.
• JavaScript: form.novalidate = true disables; false re-enables browser validation.

const form = document.getElementById("myForm");

form.novalidate = true;   // skip browser validation

form.novalidate = false;  // restore browser validation

Applicable Elements

novalidate vs formnovalidate

Example: a form with “Save draft” (formnovalidate) and “Publish” (validated) buttons on the same form.

Examples Gallery

Submit with required fields bypassed, toggle form.novalidate, and custom JavaScript validation.

<form action="/submit" method="post" novalidate>

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" required>



  <label for="email">Email:</label>

  <input type="email" id="email" name="email" required>



  <button type="submit">Submit</button>

</form>

<form id="dynamicForm">

  <input type="email" required>

  <button type="submit">Submit</button>

</form>



<script>

  const form = document.getElementById("dynamicForm");

  form.novalidate = true;  // disable browser validation

  form.novalidate = false; // re-enable

</script>

<form id="signup" novalidate>

  <input type="email" id="email" required>

  <button type="submit">Sign up</button>

</form>



<script>

  document.getElementById("signup").addEventListener("submit", function (e) {

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

    if (!email.checkValidity()) {

      e.preventDefault();

      showCustomError(email.validationMessage);

    }

  });

</script>

♿ Accessibility

• Announce errors — Custom validation must expose errors to screen readers with aria-invalid, aria-describedby, and visible text.
• Do not rely on browser tooltips alone — Native validation bubbles may not meet your design or a11y requirements—replace them thoughtfully.
• Focus invalid fields — Move focus to the first error so keyboard users discover problems.
• Keep labels — novalidate does not remove the need for <label> elements.
• Match native semantics — Use appropriate type, required, and ARIA so assistive tech understands field purpose even when browser validation is off.

💡 Best Practices