Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use formnovalidate attribute in HTML?
The formnovalidate attribute in HTML is a boolean attribute that disables form validation for a specific submit button. When applied to a submit button, it overrides the form's validation requirements, allowing the form to be submitted without validating any required fields or input constraints.
This attribute is particularly useful when you have multiple submit buttons in a form and want some buttons to bypass validation (such as "Save as Draft" or "Cancel" buttons) while others enforce validation (like "Submit" buttons).
Syntax
Following is the syntax for the formnovalidate attribute −
<input type="submit" formnovalidate> <button type="submit" formnovalidate>Submit</button>
The attribute can be written as formnovalidate or formnovalidate="formnovalidate". Both are valid boolean attribute syntax.
How It Works
The formnovalidate attribute works by overriding the form's built-in HTML5 validation when that specific submit button is clicked. Normally, browsers validate required fields, email formats, number ranges, and other constraints before submitting a form. With formnovalidate, these checks are bypassed.
This attribute only affects the submission triggered by that particular button. Other submit buttons in the same form will still enforce validation unless they also have the formnovalidate attribute.
Basic Example
Following example demonstrates a form with both validating and non-validating submit buttons −
<!DOCTYPE html>
<html>
<head>
<title>formnovalidate Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form action="#" method="post">
<p>
<label for="email">Email (required):</label><br>
<input type="email" id="email" name="email" required style="width: 250px; padding: 5px;">
</p>
<p>
<label for="age">Age (18-99):</label><br>
<input type="number" id="age" name="age" min="18" max="99" required style="width: 100px; padding: 5px;">
</p>
<p>
<input type="submit" value="Submit with Validation" style="padding: 8px 15px; margin-right: 10px;">
<input type="submit" formnovalidate value="Save as Draft" style="padding: 8px 15px; background-color: #6c757d; color: white; border: none;">
</p>
</form>
</body>
</html>
In this example, clicking "Submit with Validation" will check that the email field is filled and properly formatted, and that age is between 18-99. Clicking "Save as Draft" bypasses these checks −
User Registration Form Email (required): [input field] Age (18-99): [number field] [Submit with Validation] [Save as Draft]
Using with Button Element
The formnovalidate attribute also works with <button> elements of type submit −
<!DOCTYPE html>
<html>
<head>
<title>formnovalidate with Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form action="#" method="post">
<p>
<label for="name">Name (required):</label><br>
<input type="text" id="name" name="name" required style="width: 200px; padding: 5px;">
</p>
<p>
<label for="message">Message (required):</label><br>
<textarea id="message" name="message" required rows="4" style="width: 300px; padding: 5px;"></textarea>
</p>
<p>
<button type="submit">Send Message</button>
<button type="submit" formnovalidate style="background-color: #dc3545; color: white; border: none; padding: 8px 15px; margin-left: 10px;">Cancel</button>
</p>
</form>
</body>
</html>
The "Send Message" button enforces validation, while the "Cancel" button with formnovalidate allows immediate submission without checking required fields.
Contact Form Name (required): [input field] Message (required): [textarea] [Send Message] [Cancel]
Multiple Submit Buttons Example
Following example shows a practical use case with multiple submit actions −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Article Editor</h2>
<form action="#" method="post">
<p>
<label for="title">Article Title (required):</label><br>
<input type="text" id="title" name="title" required style="width: 400px; padding: 5px;">
</p>
<p>
<label for="content">Content (required):</label><br>
<textarea id="content" name="content" required rows="6" style="width: 400px; padding: 5px;"></textarea>
</p>
<p>
<input type="submit" name="action" value="Publish" style="background-color: #28a745; color: white; border: none; padding: 10px 20px; margin-right: 5px;">
<input type="submit" name="action" value="Save Draft" formnovalidate style="background-color: #6c757d; color: white; border: none; padding: 10px 20px; margin-right: 5px;">
<input type="submit" name="action" value="Preview" formnovalidate style="background-color: #007bff; color: white; border: none; padding: 10px 20px;">
</p>
</form>
</body>
</html>
In this article editor, "Publish" requires all fields to be filled, while "Save Draft" and "Preview" can work with incomplete content.
Article Editor Article Title (required): [input field] Content (required): [textarea] [Publish] [Save Draft] [Preview]
Browser Compatibility
The formnovalidate attribute is supported in modern browsers including Chrome, Firefox, Edge, and Opera. However, it is not supported in Internet Explorer and Safari. For applications requiring universal compatibility, consider using JavaScript validation as a fallback.
Common Use Cases
Following are the most common scenarios where formnovalidate is useful −
Save as Draft − Allow users to save incomplete forms without validation.
Cancel/Back buttons − Exit forms without triggering validation errors.
Preview functionality − Show form content preview without requiring complete data.
Multi-step forms − Navigate between steps without validating incomplete sections.
Admin overrides − Allow administrators to bypass certain validation rules.
Conclusion
The formnovalidate attribute provides fine-grained control over form validation by allowing specific submit buttons to bypass validation requirements. This is essential for creating user-friendly forms with multiple submission options like drafts, previews, and cancellation actions without forcing users to complete all required fields.
301 Views
