A radio button is a type of graphical element or icon that permits the user to select one option/choice from a set of options. The developers validate the radio buttons to ensure that the user has selected an option before submitting the form. Suppose no option is checked, and you try to submit the form. In that scenario, an error will be thrown. It can help to improve the user experience by alerting the user to show errors while submitting forms without selecting the option in the radio buttons.
This post will demonstrate the procedure to validate the radio buttons in JavaScript.
How to Validate Radio Button Using JavaScript?
Use the “checked” property of the radio button element for validating a radio button using JavaScript. It gives a boolean value “true” if the radio button is selected/checked, if it gives “false”, it means the radio button is “not-checked”.
Syntax
The following syntax is used to validate whether the radio button is checked:
Example
In the following example, we will see the validation of the radio button in two steps:
- Create Radio Buttons in Form
- Validate Radio Buttons
Step 1: Create Radio Buttons in Form
Create a form with radio buttons that allows selecting the option to learn the specific language. Attach the “onclick” event with the submit button that calls the “validation()” function:
<b>Select the Language you want to Learn</b><br>
<br><input type="radio" name="lang" value="html"> HTML
<br><input type="radio" name="lang" value="css"> CSS
<br><input type="radio" name="lang" value="JavaScript"> JavaScript
<br><input type="radio" name="lang" value="NodeJS"> NodeJS
<br><br><input type="button" value="Submit" onClick="validation()">
<p id="error"></p>
</form>
Step 2: Validate the Radio Button
Define a function “validation” that will trigger on the click of the submit button to check whether any option is selected or not:
{
var language = document.form.lang;
for (var i = 0; i < language.length; i++) {
if (language[i].checked){
break;
}
}
if (i == language.length){
return document.getElementById("error").innerHTML = "Please check any radio button";
}
return document.getElementById("error").innerHTML = "You select option " + (i + 1);
}
In the above snippet:
- First, get all the radio buttons using the assigned name with the help of “form.lang”.
- Then, iterate the radio buttons until their length and check whether the button is checked or not, using the “checked” property.
- If any radio buttons are checked, break the loop.
- If none of the buttons are selected, then show an error message “Please check any radio button”.
Output
That’s all about the validating radio button in JavaScript.
Conclusion
For validating the radio button in JavaScript, utilize the “checked” property. It will check whether the button is selected or not and gives a boolean value on the checked or unchecked conditions. This post demonstrated the procedure for validating the radio buttons in JavaScript.
