I need to validate 7 groups of Radio Buttons to make sure at least 2 groups were selected; if not show an alert.
I also have some other radio buttons on my page not related to these. They should not be included in this check.
Basically, I need at least 2 groups selected from all 7 groups.
I have tried a few methods posted in the community but none of them have worked.
$('.counter').text($(':radio:checked').length);
$('input[type=radio]').change(function() {
$('.counter').text($(':radio:checked').length);
});
// I also tried this:
/*
$('input[type="radio"]').on('click',function(){
$('.totleft').text($('input[type="radio"]:checked').length+'/'+($('input[type="radio"]').length/2))
});
/*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
<input class="group1" id="a" name="group1" value="Accept" type="radio">
<input class="group1" id="b" name="group1" value="Reject" type="radio">
<input class="group1" id="c" name="group1" value="Accept" type="radio">
<input class="group1" id="d" name="group1" value="Reject" type="radio">
</div>
<div>
<input class="group2" id="e" name="group2" value="Accept" type="radio">
<input class="group2" id="f" name="group2" value="Reject" type="radio">
<input class="group2" id="g" name="group2" value="Accept" type="radio">
<input class="group2" id="h" name="group2" value="Reject" type="radio">
</div>
<div>
<input class="group3" id="i" name="group3" value="Accept" type="radio">
<input class="group3" id="j" name="group3" value="Reject" type="radio">
<input class="group3" id="k" name="group3" value="Accept" type="radio">
<input class="group3" id="l" name="group3" value="Reject" type="radio">
</div>
<div>
<input class="group4" id="m" name="group4" value="Accept" type="radio">
<input class="group4" id="n" name="group4" value="Reject" type="radio">
<input class="group4" id="o" name="group4" value="Accept" type="radio">
<input class="group4" id="p" name="group4" value="Reject" type="radio">
</div>
<div>
<input class="group5" id="q" name="group5" value="Accept" type="radio">
<input class="group5" id="r" name="group5" value="Reject" type="radio">
<input class="group5" id="s" name="group5" value="Accept" type="radio">
<input class="group5" id="t" name="group5" value="Reject" type="radio">
</div>
<div>
<input class="group6" id="u" name="group6" value="Accept" type="radio">
<input class="group6" id="v" name="group6" value="Reject" type="radio">
<input class="group6" id="w" name="group6" value="Accept" type="radio">
<input class="group6" id="x" name="group6" value="Reject" type="radio">
</div>
<div>
<input class="group7" id="y" name="group7" value="Accept" type="radio">
<input class="group7" id="z" name="group7" value="Reject" type="radio">
<input class="group7" id="aa" name="group7" value="Accept" type="radio">
<input class="group7" id="bb" name="group7" value="Reject" type="radio">
</div>
```
function VALIDATE_FORM() {
myFunction7();
var starttime = $("#start_time_1").val();
var endtime = $("#end_time_1").val();
//console.log(starttime);
if (starttime == '') {
Swal.fire({
title: "Start Time",
text: "is REQUIRED!",
icon: "error",
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
timer: 3000,
returnFocus: false,
});
document.getElementById('start_time_1').focus();
return false;
} else {
return true;
}
};
```
4
Answers
This should work:
While the alert will trigger on window load, you could add this to a certain event.
Perhaps you can give id attribute of input elements like this and run a for loop to check the status of radio buttons of each group:
To do what you require you can wrap all the
radioinputs in a form. When the form is submit you can check thelengthof all:selectedradios and then allow/disallow the form submission as normal.By wrapping the radios in a
form, it restrict this logic so that it will ignore any other radio controls on your page.You can map the selected groups per div, filter checked groups and count the result. The snippet does not use JQuery and uses event delegation