HTML formnovalidate Attribute
The HTML formnovalidate attribute is a Boolean attribute that allows a particular submit button to submit its associated form without performing constraint validation. It overrides the form's normal validation behavior for the submission initiated by that button.
Syntax
The formnovalidate attribute is placed on a submit button that should bypass form validation.
<button type="submit" formnovalidate>Submit Without Validation</button>
It can also be used with an <input> element that acts as a submit button.
<input type="submit" value="Submit Without Validation" formnovalidate>
Elements That Use the formnovalidate Attribute
The formnovalidate attribute applies to elements that act as submit buttons.
| Element | Description |
|---|---|
<button> |
Bypasses form validation when the element acts as a submit button. |
<input type="submit"> |
Bypasses form validation when the submit input is activated. |
<input type="image"> |
Bypasses form validation when the image submit button is activated. |
Boolean Attribute
The formnovalidate attribute is a Boolean attribute. Its presence enables the behavior, regardless of the value assigned to it.
<button type="submit" formnovalidate>Save Draft</button>
Writing formnovalidate="false" does not disable the attribute. Because the attribute is present, form validation is still bypassed when that button submits the form.
Bypassing Form Validation
When a form contains controls with validation requirements such as required, the browser normally checks those requirements before submitting the form. A submit button with formnovalidate allows its submission to proceed without performing that constraint validation.
<form action="result.php" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
<button type="submit" formnovalidate>Save Draft</button>
</form>
If the email field is empty, the Submit button triggers the browser's normal validation. The Save Draft button bypasses that validation and submits the form.
formnovalidate vs novalidate
The formnovalidate and novalidate attributes both affect constraint validation, but they are used in different places.
| Attribute | Used On | Effect |
|---|---|---|
formnovalidate |
Submit button | Bypasses validation only when that submit button initiates the submission. |
novalidate |
<form> |
Disables constraint validation for submissions of the form. |
Use formnovalidate when only certain submission choices should bypass validation, such as a Save Draft button.
Common Uses
A common use for formnovalidate is a form that offers both a final submission and a way to save unfinished information. The final submission can require valid and complete values, while a Save Draft button can submit the current values without requiring the user to complete every field first.
The attribute can also be useful when a form provides an alternate submission action that does not require the same validation rules as the primary submission.
Related Form Attributes
The formnovalidate attribute belongs to a group of submit-button attributes that can override submission settings or behavior defined by the associated form.
| Submit Button Attribute | Related Form Attribute |
|---|---|
formaction |
action |
formenctype |
enctype |
formmethod |
method |
formnovalidate |
novalidate |
formtarget |
target |
Common Mistakes
Do not write formnovalidate="false" expecting validation to remain enabled. Because formnovalidate is Boolean, the attribute must be omitted when its behavior is not wanted.
Do not confuse formnovalidate with novalidate. The former applies to an individual submit button, while the latter is specified on the <form> element.
Client-side validation should not replace server-side validation. A server should still validate submitted data before accepting or processing it.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The formnovalidate attribute is widely supported on submit-capable <button> and <input> elements in current core browsers.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the formnovalidate Attribute
The example contains a required field and two submit buttons. Leave the field empty and compare the normal Submit button with the Save Draft button that uses formnovalidate.
Summary
The HTML formnovalidate attribute is a Boolean attribute that bypasses constraint validation when a particular submit button submits its associated form. It is useful when one submission option, such as saving a draft, should be allowed even when required fields or other validation requirements have not been satisfied.
