Question

I want to validate my form using jQuery.
It has groups of radio buttons.

I have found multiple solutions for a single group of radio-buttons or solutions, where you have to specifically say what group-names there are.

Like here:
Validate radio buttons with jquery?

The problem is, that the form is being generated at run-time.
The questions are saved in a txt file (don’t ask, it’s a school exercise).
The generated HTML-Code looks something like this:

<p>What&#039;s your gender? 

<input type="radio" name="gender" value="m" />Male 
<input type="radio" name="gender" value="f" />Female 

</p>

<p>

How satisfied are you with out support? 
<input type="radio" name="satisfaction" value="0%" />Not at all 
<input type="radio" name="satisfaction" value="25%" />Not very much 
<input type="radio" name="satisfaction" value="75%" />It was ok 
<input type="radio" name="satisfaction" value="100% />It was very satisfying

</p>

The js file is being generated using Twig, so it would be possible to loop through all the radio button groups, but I would like to avoid this if that’s possible.

Answer 1

You would need to add all the groups first (page load would be fine, but make sure the group array is in global scope), then validate each group individually when your form is submitted/button click

var groups = [];
$(function() {
    $("input[type=radio][name]").each(function() {
      // Add the unique group name to the array
      groups[$(this).attr("name")] = true;
    });
});
$("button").click(function() {
    $.each(groups, function(i, o) {
      // For each group, check at least one is checked
      var isValid = $("input[name='"+i+"']:checked").length;
      alert(i + ": " + isValid);
    });
});