Validate multiple radio groups before form submit

Question

All, I've got the following bit of HTML code to display a form with some radio boxes on it:

<tr id="row1">
    <td align="center">
        <b>Dancefloor</b>
        <input type="hidden" name="question_id[]" value="2">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="1">
        </div>
    </td>
</tr>
<tr bgcolor="#FFFFFF" id="row2">
    <td align="center">
        <b>Client Satisfaction</b>
        <input type="hidden" name="question_id[]" value="3">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="1">
        </div>
    </td>
</tr>
<tr id="row3">
    <td align="center">
        <b>Overall Gig</b>
        <input type="hidden" name="question_id[]" value="1">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="1">
        </div>
    </td>
</tr>
<div id="radio_group_error"></div>

This code gets generated from some PHP code so there can be one group of radio buttons or multiple. What I would like to do is make sure that at least one radio button is selected for each group on the page (using jQuery to do this check). If at least one radio group isn't selected then I'd like an error displayed in the radio_group_error div.

Any ideas on how to do this since there can be one or many different radio groups for this?

If anyone can edit this code to make it look better, feel free! (Thanks Colin)

Answer 1

You could do something like this:

var radios = $("input[type=radio]");
var group  = radios.filter("[name=rating_value_x]");
alert((group.filter(":checked").length)?"checked":"not checked");

This checks if a radiobutton of the group x is checked. Now iterate over all groups and you are done.

See the example

edit:

the loop could look like this:

   var name = "rating_value_";
    var i = 1;
    var checked = true;
    // loop as long as there are groups available
    while( radios.filter("[name="+name+i+"]").length ){
       // check if there is a checked radio-button in this group
       if (!radios.filter("[name="+name+i+"]").filter(":checked").length){
          // selfdestruct
          checked = false;
       }
       i++;
    }       
    alert(checked?"check-check checked!":"check-check failed!");