HTML formnovalidate Attribute

What You’ll Learn

The formnovalidate attribute is a useful HTML feature that lets developers control form submission when HTML5 validation is enabled. Applied to submit buttons, it bypasses client-side constraint checking for that one click—useful for “Save draft” actions or custom JavaScript validation flows.

Purpose of formnovalidate Attribute

The primary purpose of the formnovalidate attribute is to override HTML5 form validation constraints for specific submit buttons. By default, when a form contains fields with validation attributes such as required, minlength, maxlength, pattern, or type="email", the browser blocks submission if constraints are not met.

There are cases where you want to allow submission without triggering that validation—for example, saving a partial draft, running custom JavaScript validation, or offering a “Cancel” path that still posts data to the server.

📝 Syntax

Add the boolean formnovalidate attribute to a submit button to skip validation when that button is clicked:

<form>
  <input type="email" name="email" required>
  <button type="submit" formnovalidate>Submit without Validation</button>
  <button type="submit">Submit with Validation</button>
</form>

Syntax Rules

• Valid on submit controls: <button type="submit">, <input type="submit">, and <input type="image">.
• Boolean attribute—presence means validation is bypassed; omit the attribute to enforce validation.
• Only affects the button that was clicked; other submit buttons still trigger validation.
• Does not disable server-side validation—only browser constraint checking before submit.

💎 Values

The formnovalidate attribute accepts a single boolean value:

• formnovalidate (present) — Form validation is bypassed when the associated submit button is clicked.
• Attribute absent — Normal HTML5 validation runs before submission.

<!-- Recommended: boolean presence -->
<button type="submit" formnovalidate>Skip validation</button>

<!-- Also valid in HTML -->
<button type="submit" formnovalidate="">Skip validation</button>

Applicable Elements

Form novalidate vs formnovalidate

Examples Gallery

Two submit buttons with and without validation, a save-draft pattern, and dynamic formNoValidate with JavaScript.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit" formnovalidate>Submit without Validation</button>
  <button type="submit">Submit with Validation</button>
</form>

<form action="/posts" method="post">
  <input type="text" name="title" required minlength="5">
  <textarea name="body" required></textarea>

  <button type="submit" formnovalidate formaction="/posts/draft">Save Draft</button>
  <button type="submit">Publish</button>
</form>

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

<script>
  document.getElementById("submitButton").formNoValidate = true;
</script>

♿ Accessibility

• Label buttons clearly — Names like “Save draft” vs “Publish” explain why validation may differ.
• Announce validation errors — When validation runs, ensure error messages are visible and announced to screen readers.
• Do not confuse users — If draft save skips validation, explain that incomplete data may be stored.
• Keep primary action validated — The main submit path should usually enforce constraints for data quality.

💡 Best Practices