Attribute novalidate

The attribute disables native form validation from the browser side.

        
          
          <form novalidate>...</form>
          <form novalidate>...</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The novalidate attribute is written inside the opening form tag, without any values.

Let's create a feedback form for the service. The required fields will be the email for feedback, comment, and consent for the processing of personal data:

        
          
          <form novalidate>  <div class="form-row">    <label for="name">Name:</label>    <input      type="text"      name="name"      id="name"      placeholder="Mickey"    >  </div>  <div class="form-row required">    <label for="email">Email</label>    <input      type="email"      name="email"      id="email"      placeholder="email@example.com"      required    >  </div>  <div class="form-row required">    <label for="comment">Comment</label>    <textarea      name="comment"      id="comment"      placeholder="I liked everything!"      required    >    </textarea>  </div>  <div class="form-row">    <label>      <input        type="checkbox"        name="agree"        required      >      <span class="checkbox-title">        I agree to the processing of personal data      </span>    </label>  </div>  <button type="submit">Send</button></form>
          <form novalidate>
  <div class="form-row">
    <label for="name">Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      placeholder="Mickey"
    >
  </div>
  <div class="form-row required">
    <label for="email">Email</label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="email@example.com"
      required
    >
  </div>
  <div class="form-row required">
    <label for="comment">Comment</label>
    <textarea
      name="comment"
      id="comment"
      placeholder="I liked everything!"
      required
    >
    </textarea>
  </div>
  <div class="form-row">
    <label>
      <input
        type="checkbox"
        name="agree"
        required
      >
      <span class="checkbox-title">
        I agree to the processing of personal data
      </span>
    </label>
  </div>
  <button type="submit">Send</button>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Although some fields are mandatory to fill, and there is even a field of type email, you will still be able to submit an empty form. But as soon as you remove the novalidate attribute with the button "Reinstate Validation," the browser will not allow the form to be submitted until all fields are filled out correctly.

Each form field that the user fills in can have a clearly specified type and input rules. At the moment the user submits the form, the browser checks the validity of the entered data, blocking the submission in case of an error and showing a tooltip where it was made.

For example, fields with the required attribute must be filled out, and the browser will indicate if the user has missed any of them.

The novalidate attribute tells the browser not to check fields and not to hinder submission of the form, as sometimes such behavior can be undesirable. For example, the form is validated using JavaScript, and conflicts with browser validation need to be avoided. This also includes removing pop-up tooltips to show custom ones instead.

With the novalidate attribute, the browser can simply be asked not to interfere—for example, instead of removing the required attributes from fields or even replacing <form> with <div>. This attribute allows keeping semantically correct and accessible code.

💡 The entered data is checked only when attempting to submit the form.

💡 Regardless of the presence of the novalidate attribute, pseudo-classes :invalid/:valid will be applied to form fields (as well as to the form itself and its fieldsets) in any case.

💡 The effect of the novalidate attribute is similar to the effect of the formnovalidate attribute, which can be applied to the form submission button—<button type="submit">, <input type="submit">, or <input type="image">. It also gives the browser an instruction to ignore validation.