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 Checkbox required Property
The HTML DOM Input Checkbox required property determines whether a checkbox input must be checked before a form can be submitted. This property corresponds to the HTML required attribute and provides a way to enforce mandatory checkbox selections in web forms.
Syntax
Following is the syntax for getting the required property value −
inputCheckboxObject.required
Following is the syntax for setting the required property −
inputCheckboxObject.required = booleanValue
Return Value
The required property returns a Boolean value −
true − The checkbox is required and must be checked before form submission.
false − The checkbox is optional and form can be submitted without checking it (default value).
Parameters
The property accepts the following boolean values −
| Value | Description |
|---|---|
| true | Makes the checkbox required for form submission. User must check it before submitting. |
| false | Makes the checkbox optional. This is the default behavior. |
Example − Getting Required Property
Following example demonstrates how to check if a checkbox has the required property set −
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Required Property</h2>
<form>
<label>
<input type="checkbox" id="terms" required>
I agree to the terms and conditions (Required)
</label>
<br><br>
<label>
<input type="checkbox" id="newsletter">
Subscribe to newsletter (Optional)
</label>
</form>
<br>
<button onclick="checkRequired()">Check Required Status</button>
<div id="output" style="margin-top: 15px; padding: 10px; background-color: #f8f9fa; border: 1px solid #dee2e6;"></div>
<script>
function checkRequired() {
var terms = document.getElementById("terms");
var newsletter = document.getElementById("newsletter");
var output = document.getElementById("output");
output.innerHTML = "<strong>Required Status:</strong><br>" +
"Terms checkbox required: " + terms.required + "<br>" +
"Newsletter checkbox required: " + newsletter.required;
}
</script>
</body>
</html>
The output shows the required status of both checkboxes −
Required Status: Terms checkbox required: true Newsletter checkbox required: false
Example − Setting Required Property
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set Checkbox Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Required Setting</h2>
<form id="myForm">
<label>
<input type="checkbox" id="privacy">
Accept privacy policy
</label>
<br><br>
<input type="submit" value="Submit Form">
</form>
<br>
<button onclick="makeRequired()">Make Required</button>
<button onclick="makeOptional()">Make Optional</button>
<div id="status" style="margin-top: 15px; padding: 10px; background-color: #e8f4f8; border: 1px solid #b8daff;"></div>
<script>
function makeRequired() {
var checkbox = document.getElementById("privacy");
checkbox.required = true;
updateStatus();
}
function makeOptional() {
var checkbox = document.getElementById("privacy");
checkbox.required = false;
updateStatus();
}
function updateStatus() {
var checkbox = document.getElementById("privacy");
var status = document.getElementById("status");
status.innerHTML = "Privacy checkbox is now: " +
(checkbox.required ? "<strong>Required</strong>" : "<strong>Optional</strong>");
}
// Initialize status display
updateStatus();
</script>
</body>
</html>
The buttons allow you to toggle the required status dynamically. When required, the form cannot be submitted without checking the checkbox.
Example − Form Validation with Required Checkbox
Following example demonstrates form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Form Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form id="registrationForm">
<label>
<input type="checkbox" id="terms" required>
I agree to the terms and conditions *
</label>
<br><br>
<button type="button" onclick="validateForm()">Check Form Validity</button>
<button type="submit">Submit Registration</button>
</form>
<div id="validation" style="margin-top: 15px; padding: 10px; border-radius: 4px;"></div>
<script>
function validateForm() {
var checkbox = document.getElementById("terms");
var validationDiv = document.getElementById("validation");
if (checkbox.required && checkbox.checked) {
validationDiv.style.backgroundColor = "#d4edda";
validationDiv.style.color = "#155724";
validationDiv.style.border = "1px solid #c3e6cb";
validationDiv.innerHTML = "? Form is valid and ready to submit!";
} else if (checkbox.required && !checkbox.checked) {
validationDiv.style.backgroundColor = "#f8d7da";
validationDiv.style.color = "#721c24";
validationDiv.style.border = "1px solid #f5c6cb";
validationDiv.innerHTML = "? Please check the required checkbox before submitting.";
}
}
// Prevent form submission if required checkbox is not checked
document.getElementById("registrationForm").onsubmit = function(e) {
var checkbox = document.getElementById("terms");
if (checkbox.required && !checkbox.checked) {
e.preventDefault();
validateForm();
}
};
</script>
</body>
</html>
This example shows real-time validation feedback. The form prevents submission when the required checkbox is unchecked and provides visual feedback to the user.
Browser Compatibility
The required property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. When a required checkbox is not checked, the browser displays a built-in validation message and prevents form submission.
Conclusion
The HTML DOM Input Checkbox required property provides an essential way to enforce mandatory checkbox selections in web forms. It can be both read and modified using JavaScript, enabling dynamic form validation and improved user experience through client-side validation feedback.
442 Views
