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
HTML DOM Input Submit formNoValidate property
The HTML DOM Input Submit formNoValidate property sets or returns whether form data should be validated when submitted. This property overrides the form's novalidate attribute and is specifically used with submit buttons to control validation behavior on a per-button basis.
Syntax
Following is the syntax for setting the formNoValidate property −
submitObject.formNoValidate = true|false
Following is the syntax for getting the formNoValidate property −
var value = submitObject.formNoValidate
Parameters
The formNoValidate property accepts the following values −
true − The form data should not be validated when submitted
false − The form data should be validated when submitted (default)
Return Value
Returns a Boolean value indicating whether the form should skip validation (true) or perform validation (false) when submitted through this particular submit button.
Example − Setting formNoValidate Property
Following example demonstrates how to set the formNoValidate property to bypass form validation −
<!DOCTYPE html>
<html>
<head>
<title>Input Submit formNoValidate Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Submit formNoValidate Property</h2>
<form action="/action_page.php" style="border: 2px solid green; padding: 15px; background-color: #f9f9f9;">
<label>Username (required): </label>
<input type="text" id="username" required><br><br>
<label>Email (required): </label>
<input type="email" id="email" required><br><br>
<input type="submit" id="submitBtn" value="Submit">
</form>
<br>
<button onclick="skipValidation()">Skip Validation</button>
<button onclick="enableValidation()">Enable Validation</button>
<p id="result"></p>
<script>
function skipValidation() {
document.getElementById("submitBtn").formNoValidate = true;
document.getElementById("result").innerHTML = "formNoValidate set to true - Form will submit without validation.";
}
function enableValidation() {
document.getElementById("submitBtn").formNoValidate = false;
document.getElementById("result").innerHTML = "formNoValidate set to false - Form will be validated before submission.";
}
</script>
</body>
</html>
The output shows a form with required fields. Clicking "Skip Validation" allows the form to submit even with empty required fields, while "Enable Validation" enforces validation −
Submit formNoValidate Property [Username field] [Email field] [Submit button] [Skip Validation] [Enable Validation] Status message appears based on button clicked
Example − Multiple Submit Buttons
Following example shows how different submit buttons can have different validation behaviors −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form with Multiple Submit Options</h2>
<form action="/process.php" method="post" style="border: 2px solid blue; padding: 15px; background-color: #f0f8ff;">
<label>Name (required): </label>
<input type="text" name="name" required><br><br>
<label>Phone (required): </label>
<input type="tel" name="phone" required><br><br>
<input type="submit" value="Save" id="saveBtn">
<input type="submit" value="Save Draft" id="draftBtn" formnovalidate>
</form>
<br>
<button onclick="checkButtons()">Check Validation Settings</button>
<p id="output"></p>
<script>
function checkButtons() {
var saveValidation = document.getElementById("saveBtn").formNoValidate;
var draftValidation = document.getElementById("draftBtn").formNoValidate;
document.getElementById("output").innerHTML =
"Save Button formNoValidate: " + saveValidation + "<br>" +
"Draft Button formNoValidate: " + draftValidation;
}
</script>
</body>
</html>
The "Save" button validates the form, while "Save Draft" skips validation, allowing users to save incomplete forms −
Form with Multiple Submit Options [Name field] [Phone field] [Save] [Save Draft] [Check Validation Settings] Save Button formNoValidate: false Draft Button formNoValidate: true
Example − Getting formNoValidate Value
Following example demonstrates how to retrieve the current formNoValidate property value −
<!DOCTYPE html>
<html>
<head>
<title>Getting formNoValidate Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Check formNoValidate Property</h2>
<form style="border: 2px solid orange; padding: 15px; background-color: #fff8dc;">
<label>Message: </label>
<input type="text" name="message" required><br><br>
<input type="submit" value="Submit" id="mySubmit">
</form>
<br>
<button onclick="getValidationStatus()">Get Current Status</button>
<button onclick="toggleValidation()">Toggle Validation</button>
<p id="status"></p>
<script>
function getValidationStatus() {
var isNoValidate = document.getElementById("mySubmit").formNoValidate;
var statusText = isNoValidate ? "Validation is DISABLED" : "Validation is ENABLED";
document.getElementById("status").innerHTML = "Current Status: " + statusText;
}
function toggleValidation() {
var submitBtn = document.getElementById("mySubmit");
submitBtn.formNoValidate = !submitBtn.formNoValidate;
getValidationStatus();
}
</script>
</body>
</html>
This example allows you to check and toggle the validation status of the submit button dynamically −
Check formNoValidate Property [Message field] [Submit] [Get Current Status] [Toggle Validation] Current Status: Validation is ENABLED (or DISABLED after toggle)
Browser Compatibility
The formNoValidate property is supported in all modern browsers that support HTML5 form validation, including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. This property works only with <input type="submit"> and <button type="submit"> elements.
Key Points
The formNoValidate property only affects the specific submit button, not the entire form
It overrides the form's
novalidateattribute when set totrueUseful for creating "Save Draft" or "Save Later" functionality in forms
The default value is
false, meaning validation is enabled by defaultCan be set both in HTML using the
formnovalidateattribute and in JavaScript using the property
Conclusion
The formNoValidate property provides flexible control over form validation by allowing different submit buttons to have different validation behaviors. This is particularly useful for forms that need both validated submission and draft-saving capabilities, giving users multiple options for how they interact with the form.
140 Views
