I have some radio buttons and some JavaScript for validating the radio buttons.
HTML:
<html>
<head>
</head>
<body>
<input type="radio" name="radios" id="first-radio" value="option1" required>
<label for="first-radio">
Radio 1
</label>
<input type="radio" name="radios" id="second-radio" value="option2">
<label for="second-radio">
Radio 2
</label>
<input id="txt-box" type="text" required />
<button id="btn-next">
Btn Next
</button>
<script src="radios.js"></script>
</body>
</html>
JavaScript:
(function () {
function validateTextbox() {
document.getElementById('txt-box').reportValidity();
}
function validateRadios() {
document.getElementById('first-radio').reportValidity();
}
// document.getElementById('btn-next').addEventListener('click', validateTextbox);
document.getElementById('btn-next').addEventListener('click', validateRadios);
})();
I've set name for the radio buttons to group them and added required to one of them.
I have added an event listener for the button and when I click the button I check if one of the radio buttons are checked using reportValidity.
The code seems to work except for when I click the button the "Please select one of these options" validation warning message in Chrome doesn't show up unless I move the cursor away from the button.
Any clues why that is and what I need to do instead?
If I try the same with a textbox, the textbox shows the validation warning message 'Please fill out this field' immediately after I click the button.
Edit: I tried the same in Firefox and Edge and both the 'Please select one of these options' and 'Please fill out this field' show up immediately after I click the button.
Is this a Chrome bug?
Here is my solution:
document.getElementById('btn-next').addEventListener('click', validateRadios);
function validateRadios() {
console.log(document.getElementById('ok').reportValidity());
}<form id="ok">
<input type="radio" name="radios" id="first-radio" value="option1" required>
<label for="first-radio">
Radio 1
</label>
<input type="radio" name="radios" id="second-radio" value="option2">
<label for="second-radio">
Radio 2
</label>
<input id="txt-box" type="text" required />
<button id="btn-next">
Btn Next
</button>
</form>Your purpose is to check if the radio button is checked or not. The approach should be that you keep checked one of the options by default.
<input type="radio" name="radios" id="first-radio" value="option1" checked>
So instead of required, put checked attribute.
// On clicking submit do following
$("#btn-next").click(function() {
var atLeastOneChecked = false;
$("input[type=radio]").each(function() {
// If radio button not checked
// display alert message
if ($(this).attr("checked") != "checked") {
// Alert message by displaying
// error message
$("#msg").html(
"<span class='alert alert-danger' id='error'>"
+ "Please Choose atleast one</span>");
}
});
});
You will have to loop through each radio button and check if any of them is checked. Following is the url from which I extracted and modified as per your need.