HTML novalidate Attribute

Description

The novalidate attribute is a Boolean attribute that can be added to a <form> element in HTML. When present, it signals that the form should not be validated when submitted. This means that the browser will not perform its default client-side validation on the input fields within the form. As a result, the form can be submitted without regard to the standard rules that would typically ensure that required fields are filled out, that the input format matches the field's type (such as email addresses or URLs), and other validation constraints are met.

This attribute can be useful in situations where developers wish to handle validation exclusively through custom JavaScript, or when submitting the form data for server-side validation without interfering with the user's input. It's also helpful for testing purposes, allowing developers to bypass client-side validation to ensure the server-side code can handle a variety of inputs, including those that don't meet typical validation criteria.

To use the novalidate attribute, simply include it in the opening tag of your <form> element, like so:

<form action="/submit-form" method="post" novalidate>
  <!-- Form inputs go here -->
</form>

By adding novalidate, you gain full control over the validation process, which can be particularly beneficial for custom user experiences or when integrating complex form validation logic that goes beyond what the browser can offer. However, it's essential to ensure that proper validation is still conducted, either on the client-side through custom scripts or on the server-side, to maintain data integrity and security.

Syntax

<form novalidate>

Values

The novalidate attribute is a boolean attribute, therefore no values are associated with this attribute.

Applies To

The novalidate attribute can be used on the following html elements.

<form>

Example

HTML

<form action="formscript.php" novalidate>

  <label for="name">Name:</label><br>

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

  <br><br>

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

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

  <br><br>

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

</form>

Result

Editor