JSFiddle - React, Tailwind, and code Playground
HTML
<form id="foo">
<div class='selectGroup'>
<input class="radioclass" id="q1a" value="a" name="question[q1correct]" type="radio">1</input>
<input class="radioclass" id="q1b" value="b" name="question[q1correct]" type="radio">2</input>
<input class="radioclass" id="q1c" value="c" name="question[q1correct]" type="radio">3</input>
<input class="radioclass" id="q1d" value="d" name="question[q1correct]" type="radio">4</input>
</div>
<div class='selectGroup'>
<input class="radioclass" id="q2a" value="a" name="question[q2correct]" type="radio">1</input>
<input class="radioclass" id="q2b" value="b" name="question[q2correct]" type="radio">2</input>
<input class="radioclass" id="q2c" value="c" name="question[q2correct]" type="radio">3</input>
<input class="radioclass" id="q2d" value="d" name="question[q2correct]" type="radio">4</input>
</div>
<input id="publishbtn" class="greenbtn" type="submit" value="PUBLISH" name="commit">
</input>
</form>
JavaScript
$('#foo').submit(function(e) {
e.preventDefault();
var $form = $(e.currentTarget)
var groupsValidationList = []
selectGroups = $form.children('.selectGroup')
selectGroups.each(function(index, group) {
$group = $(group);
checks = $group.children('.radioclass').map(function(index, radioItem) {
return $(radioItem).is(':checked')
})
isValid = ($.inArray(true, checks) != -1);
groupsValidationList.push(isValid);
})
if(groupsValidationList.every(function(validationResult) { return validationResult; })) {
alert('ok');
} else {
alert('at least one group is not marked');
}
})