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 Radio required property
The HTML DOM Input Radio required property is associated with the required attribute of an <input> element. The required property is used for setting and returning whether it is necessary to check a radio button before the form is submitted to the server. This allows the form to not submit if a radio button with the required attribute is left unchecked by the user.
Syntax
Following is the syntax for setting the required property −
radioObject.required = true|false
Following is the syntax for getting the required property −
var isRequired = radioObject.required;
Property Values
true − The radio button must be checked before submitting the form.
false − The radio button is optional and can be left unchecked (default value).
Example − Getting the Required Property
Following example demonstrates how to check if a radio button has the required property set −
<!DOCTYPE html>
<html>
<head>
<title>Radio Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Radio Required Property Example</h2>
<form style="border: solid 1px green; padding: 15px; margin: 10px 0;">
<p>Select a fruit:</p>
<input type="radio" name="fruits" id="mango" value="mango" required>
<label for="mango">Mango</label><br><br>
<input type="radio" name="fruits" id="apple" value="apple">
<label for="apple">Apple</label><br><br>
<input type="submit" value="Submit">
</form>
<button type="button" onclick="checkRequired()">Check Required Property</button>
<p id="result"></p>
<script>
function checkRequired() {
var mangoRequired = document.getElementById("mango").required;
var appleRequired = document.getElementById("apple").required;
var message = "Mango radio button required: " + mangoRequired + "<br>";
message += "Apple radio button required: " + appleRequired;
document.getElementById("result").innerHTML = message;
}
</script>
</body>
</html>
The output shows the required property values for both radio buttons −
Radio Required Property Example Select a fruit: ? Mango ? Apple [Submit] [Check Required Property] Mango radio button required: true Apple radio button required: false
Example − Setting the Required Property
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamically Setting Required Property</h2>
<form style="border: solid 1px blue; padding: 15px; margin: 10px 0;">
<p>Choose your preferred language:</p>
<input type="radio" name="language" id="html" value="html">
<label for="html">HTML</label><br><br>
<input type="radio" name="language" id="css" value="css">
<label for="css">CSS</label><br><br>
<input type="submit" value="Submit Form">
</form>
<button type="button" onclick="makeRequired()">Make HTML Required</button>
<button type="button" onclick="removeRequired()">Remove Required</button>
<p id="status"></p>
<script>
function makeRequired() {
document.getElementById("html").required = true;
document.getElementById("status").innerHTML = "HTML radio button is now required.";
}
function removeRequired() {
document.getElementById("html").required = false;
document.getElementById("status").innerHTML = "HTML radio button is now optional.";
}
</script>
</body>
</html>
The buttons allow you to dynamically change the required property, affecting form validation −
Dynamically Setting Required Property Choose your preferred language: ? HTML ? CSS [Submit Form] [Make HTML Required] [Remove Required] (Status message appears here based on button clicks)
Form Validation with Required Radio Buttons
When a radio button has the required attribute, the browser will prevent form submission and display a validation message if none of the radio buttons in the group are selected.
Example − Form Validation
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form Validation Example</h2>
<form style="border: solid 1px red; padding: 15px;" onsubmit="return validateForm()">
<p>Please select your gender (required):</p>
<input type="radio" name="gender" id="male" value="male" required>
<label for="male">Male</label><br><br>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label><br><br>
<input type="radio" name="gender" id="other" value="other">
<label for="other">Other</label><br><br>
<input type="submit" value="Submit">
</form>
<p id="message"></p>
<script>
function validateForm() {
var genderSelected = document.querySelector('input[name="gender"]:checked');
if (!genderSelected) {
document.getElementById("message").innerHTML = "Please select a gender before submitting.";
return false;
} else {
document.getElementById("message").innerHTML = "Form submitted with gender: " + genderSelected.value;
return false; // Prevent actual submission for demo
}
}
</script>
</body>
</html>
The form validates that at least one radio button in the required group is selected before submission.
Browser Compatibility
The required property for radio buttons is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The browser's built-in validation will automatically prevent form submission if required radio buttons are not selected.
Key Points
The
requiredproperty applies to the entire radio button group (all buttons with the samename).Only one radio button in the group needs the
requiredattribute for the entire group to be required.The property returns a boolean value:
trueif required,falseif optional.Setting
required = trueadds browser validation, whilerequired = falseremoves it.Use JavaScript validation for more control over error messages and validation behavior.
Conclusion
The HTML DOM Input Radio required property provides an easy way to enforce selection validation on radio button groups. It can be both read and set dynamically using JavaScript, allowing flexible form validation that ensures users make required selections before form submission.
283 Views
