HTML novalidate Attribute

HTML novalidate Attribute

The HTML novalidate attribute is a Boolean attribute used on the <form> element to prevent the browser from performing automatic constraint validation when the form is submitted.

Elements That Use the novalidate Attribute

The novalidate attribute is used with the <form> element.

Boolean Attribute

The novalidate attribute is a Boolean attribute. When it is present on a form, automatic constraint validation is skipped when that form is submitted.

<form novalidate>
  ...
</form>

Because novalidate is Boolean, writing novalidate="false" does not enable validation. The attribute is still present, so automatic validation is disabled. To restore the form's normal validation behavior, omit the attribute.

Form Validation

Without novalidate, the browser normally checks applicable validation constraints when a form is submitted. These can include attributes such as required, minlength, maxlength, min, max, pattern, and input type requirements.

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

If the email field is empty or contains an invalid email address, the browser can prevent submission and display its built-in validation message.

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

With novalidate present, the browser does not automatically block submission because the email control fails those constraints.

novalidate and formnovalidate

The novalidate attribute applies to the entire form. The related formnovalidate attribute can be placed on a submit button to skip validation only when the form is submitted using that particular control.

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

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

The first button uses the form's normal validation behavior. The second button bypasses constraint validation for that submission.

Custom Validation

Using novalidate disables the browser's automatic validation during form submission, but it does not remove the validation constraints from the controls or disable the Constraint Validation API. Scripts can still inspect validity and provide custom validation messages or interfaces.

<form novalidate>
  <input type="email" required>
</form>

For example, the control can still match CSS pseudo-classes such as :valid and :invalid, and JavaScript can use methods such as checkValidity() and reportValidity().

Server-Side Validation

The novalidate attribute only affects the browser's automatic form validation. It does not change how the server processes submitted data.

Important form data should always be validated on the server. Client-side validation can improve the user experience, but it must not be relied upon to enforce security or data requirements.

Common Mistakes

Do not use novalidate="false" when you want normal validation. Because novalidate is Boolean, its presence disables automatic validation regardless of the assigned text value.

Do not assume that novalidate removes attributes such as required, pattern, or minlength from the controls. Those constraints still exist and remain available through the Constraint Validation API.

Do not confuse novalidate with formnovalidate. The novalidate attribute belongs on the <form>, while formnovalidate can be used on a submit control to bypass validation for a particular submission.

Do not use novalidate as a substitute for server-side validation. Submitted data should still be checked by the server.

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 novalidate attribute on the <form> element and HTML constraint validation are widely supported 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 novalidate Attribute

The example contains two forms with required email fields. Use the Check button in each form to compare normal browser validation with a form that has the novalidate attribute.

Summary

The HTML novalidate attribute is a Boolean attribute used on the <form> element to bypass automatic constraint validation when the form is submitted. The related formnovalidate attribute can bypass validation for an individual submission, while the Constraint Validation API remains available for custom validation.