The HTML novalidate attribute is used on a <form> element to completely disable form validation for that form element in the browser.
Definition and Usage
➔ When the novalidate attribute is applied to the <form> tag, all validation constraints (such as required, min, max, type="email", etc.) are bypassed for all inputs within that form.
➔ A formnovalidate attribute is used on the <input type="submit"> or <button type="submit"> element to allow a single button to bypass validation.
Syntax
//In HTML
<form id="myform" action="/server-side" method="get" novalidate>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" id="fname" name="fname" required placeholder="Enter First Name"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="lname" name="lname" required placeholder="Enter Last Name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" id="email" name="email" placeholder="Enter Email"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" rows='5' cols='40' required
placeholder="Enter Comment"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="checkFromValidation()"></td>
</tr>
</table>
</form>
//In JavaScript
<script>
const element = document.getElementById('myform');
element.novalidate = true;
element.setAttribute('novalidate', 'false');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML novalidate attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 5px;
}
input:hover,
textarea:hover {
background-color: #f6f6f6;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML novalidate attribute example</h3>
<p>The novalidate attribute is used with the form element to specify how to send form data to the server.</p>
<form id="myform" action="/server-side" method="get" novalidate>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" id="fname" name="fname" required placeholder="Enter First Name"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="lname" name="lname" required placeholder="Enter Last Name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" id="email" name="email" placeholder="Enter Email" required></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" rows='5' cols='40' required
placeholder="Enter Comment"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="checkFromValidation()"></td>
</tr>
</table>
</form>
<p id="result"><b>Note:</b> To see validation, remove the novalidate attribute from the <form> element.
</p>
</div>
</body>
<script>
let myform = document.getElementById("myform");
function checkFromValidation() {
let x = myform.noValidate;
if (x) {
alert("Form validation is bypassed because the form element has the novalidate attribute.");
event.preventDefault();
} else {
if (myform.checkValidity()) {
alert("Submitted.")
event.preventDefault();
}
}
}
</script>
</html>
Click on the "Try it Now" button to see how it works.