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
Selected Reading
How not to validate HTML5 input with required attribute
To avoid validation on specific form elements in HTML5, use the formnovalidate attribute on submit buttons or the novalidate attribute on the form itself. This allows you to bypass HTML5's built-in validation for required fields when needed.
Using formnovalidate Attribute
The formnovalidate attribute can be added to submit buttons to skip validation for that specific submission:
<!DOCTYPE html>
<html>
<head>
<title>HTML formnovalidate attribute</title>
</head>
<body>
<form action="new.php" method="get">
<label for="rank">Rank:</label>
<input type="number" id="rank" name="rank" required><br><br>
<input type="submit" value="Submit with Validation"><br>
<input type="submit" formnovalidate value="Submit without Validation">
</form>
</body>
</html>
Using novalidate on Form
You can disable validation for the entire form by adding novalidate to the form element:
<!DOCTYPE html>
<html>
<head>
<title>Form novalidate attribute</title>
</head>
<body>
<form action="new.php" method="get" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript Method to Disable Validation
You can also programmatically disable validation using JavaScript:
<script>
function submitWithoutValidation() {
const form = document.getElementById('myForm');
form.noValidate = true;
form.submit();
}
function enableValidation() {
const form = document.getElementById('myForm');
form.noValidate = false;
}
</script>
<form id="myForm" action="new.php" method="get">
<input type="email" name="email" required>
<button type="button" onclick="submitWithoutValidation()">
Submit without validation
</button>
<input type="submit" value="Submit with validation">
</form>
Comparison of Methods
| Method | Scope | Use Case |
|---|---|---|
formnovalidate |
Specific button | Save as draft, cancel actions |
novalidate |
Entire form | Custom validation with JavaScript |
| JavaScript toggle | Dynamic control | Conditional validation based on user actions |
Common Use Cases
Disabling HTML5 validation is useful for:
- Save Draft: Allow users to save incomplete forms
- Custom Validation: Implement your own validation logic
- Multi-step Forms: Skip validation on previous steps
- Cancel Actions: Exit forms without triggering validation errors
Conclusion
Use formnovalidate for selective bypassing or novalidate for complete form validation control. This provides flexibility when implementing custom validation or draft-saving functionality.
Updated on: 2026-03-15T23:18:59+05:30
257 Views
Advertisements