Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

What is the difference between novalidate and formnovalidate attributes?

HTML Web Development Front End Technology

The novalidate and formnovalidate attributes are HTML5 attributes used to bypass form validation. The novalidate attribute is applied to the <form> element to disable validation for the entire form, while formnovalidate is applied to individual submit buttons to override form validation on a per-button basis.

Both attributes are Boolean attributes, meaning their presence enables the functionality regardless of their value. These attributes are particularly useful when you want to allow users to save form progress or submit incomplete forms in certain scenarios.

Syntax

Following is the syntax for the novalidate attribute −

<form novalidate>
   <!-- form elements -->
</form>

Following is the syntax for the formnovalidate attribute −

<input type="submit" formnovalidate value="Submit">
<button type="submit" formnovalidate>Submit</button>

HTML novalidate Attribute

The novalidate attribute is applied to the <form> element to prevent client-side validation when the form is submitted. When present, the browser will not validate any form controls within that form, including required fields, email formats, or number ranges.

This attribute is useful in scenarios where you want to allow users to save their progress without completing all required fields, or when you prefer to handle validation entirely on the server side.

Form Validation Flow Normal Form Validates required fields Checks email format Shows error messages novalidate Form Skips all validation Submits incomplete data No error messages

Example

Following example demonstrates the novalidate attribute. Even if you enter text in the number field, no validation error will appear −

<!DOCTYPE html>
<html>
<head>
   <title>HTML novalidate Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Form with novalidate Attribute</h2>
   <form action="/submit" method="get" novalidate>
      <label for="tname">Team Name (required):</label><br>
      <input type="text" id="tname" name="tname" required><br><br>
      
      <label for="trank">Team Rank:</label><br>
      <input type="number" id="trank" name="trank" min="1" max="10"><br><br>
      
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email" required><br><br>
      
      <input type="submit" value="Submit">
   </form>
</body>
</html>

The form will submit even if required fields are empty or contain invalid data because the novalidate attribute disables all client-side validation.

HTML formnovalidate Attribute

The formnovalidate attribute is applied to submit buttons (<input type="submit"> or <button type="submit">) to override form validation on a per-button basis. This allows you to have multiple submit buttons where some validate the form and others do not.

This attribute is particularly useful when you want to provide both "Submit" and "Save Draft" functionality in the same form. The regular submit button validates the form, while the "Save Draft" button with formnovalidate allows saving incomplete data.

Example

Following example shows a form with two submit buttons − one that validates and one that doesn't −

<!DOCTYPE html>
<html>
<head>
   <title>HTML formnovalidate Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Registration Form</h2>
   <form action="/submit" method="post">
      <label for="username">Username (required):</label><br>
      <input type="text" id="username" name="username" required><br><br>
      
      <label for="email">Email (required):</label><br>
      <input type="email" id="email" name="email" required><br><br>
      
      <label for="age">Age:</label><br>
      <input type="number" id="age" name="age" min="18" max="100"><br><br>
      
      <input type="submit" value="Submit" style="background-color: #4CAF50; color: white; padding: 8px 16px; margin-right: 10px;">
      <input type="submit" formnovalidate value="Save Draft" style="background-color: #f44336; color: white; padding: 8px 16px;">
   </form>
</body>
</html>

The "Submit" button validates required fields and shows error messages if validation fails. The "Save Draft" button bypasses validation and submits the form regardless of its completion status.

Practical Use Cases

Following are common scenarios where these attributes are useful −

  • Draft Saving − Allow users to save incomplete forms as drafts using a button with formnovalidate.

  • Progressive Forms − Multi-step forms where users can save progress at each step without completing all fields.

  • Server-side Validation Only − When you prefer to handle all validation on the server side rather than client-side.

  • Testing and Development − Temporarily disable validation during form testing without modifying form controls.

Example − Save Draft Functionality

<!DOCTYPE html>
<html>
<head>
   <title>Draft Save Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Article Submission Form</h2>
   <form action="/articles" method="post">
      <label for="title">Article Title (required):</label><br>
      <input type="text" id="title" name="title" required style="width: 300px; padding: 5px;"><br><br>
      
      <label for="content">Content (required):</label><br>
      <textarea id="content" name="content" required rows="5" cols="40" style="padding: 5px;"></textarea><br><br>
      
      <label for="tags">Tags:</label><br>
      <input type="text" id="tags" name="tags" style="width: 300px; padding: 5px;"><br><br>
      
      <button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 20px; margin-right: 10px; border: none; cursor: pointer;">Publish Article</button>
      <button type="submit" formnovalidate formaction="/drafts" style="background-color: #ff9800; color: white; padding: 10px 20px; border: none; cursor: pointer;">Save as Draft</button>
   </form>
</body>
</html>

In this example, users can publish complete articles (with validation) or save incomplete work as drafts (without validation) to different endpoints.

Differences Between novalidate and formnovalidate

novalidate formnovalidate
Applied to the <form> element. Applied to submit buttons (<input type="submit"> or <button type="submit">).
Disables validation for the entire form. Disables validation only for that specific submit button.
Affects all submit buttons within the form. Only affects the button where it's specified.
Cannot be overridden by individual buttons. Can override the form's validation behavior.
Useful for forms that should never validate. Useful for providing alternative submission methods (e.g., "Save Draft").
Single validation strategy for the entire form. Allows multiple validation strategies within the same form.

Browser Compatibility

Both novalidate and formnovalidate attributes are part of HTML5 and are supported by all modern browsers including Chrome, Firefox, Safari, and Edge. However, Internet Explorer only supports these attributes from version 10 onwards.

For older browsers that don't support these attributes, form validation will work normally as these attributes are simply ignored.

Conclusion

The novalidate attribute disables validation for an entire form, while formnovalidate allows selective bypassing of validation for specific submit buttons. These attributes provide flexible control over form validation, enabling features like draft saving and progressive form completion while maintaining data integrity where needed.

Updated on: 2026-03-16T21:38:53+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements