Question

I have a form (a dynamically created questionnaire) with multiple questions. I have used jQuery to style the radios as buttons (http://jqueryui.com/demos/button/#radio) but I’ve cut down the code slightly here…

<div class="yesnoradios">
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A
</div>

So, I have multiple instances of the above, with dynamically named id‘s.

I’m struggling to client-side validate the form on submit. What I need to do is ensure that one answer is selected for each question. I don’t have a lot of experience of jQuery so all I’ve done so far is loop around each question.

$('.yesnoradios').each(function(index) {
    alert($(this).attr("id"));
});

I thought I’d mention, when viewing the page in English, it’s using select‘s instead of radio button which I’m able to validate fine, but the reason I can’t use that in this instance is that the user is viewing the page in a language where the equivalent of ‘Yes’ or ‘No’ is different depending on how you structure the question, so I’m using ticks and crosses.

Thanks in advance for any help.

Edit: What I’ve tried to do is use the .children() function to check if one is checked and if not set a flag that says the form is invalid. But I cannot get the syntax right, and haven’t been able to find a good code sample for this yet.

Answer 1

Assuming you have a lot of the below …

<div class="yesnoradios">
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_Y" value="Y" />Yes
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_N" value="N" />No
    <input type="radio" name="section<%= section %>_question<%= question %>" id="section<%= section %>_question<%= question %>_NA" value="NA" />N/A
</div>

you can use this to see if at least one of all the groups is selected by using the following code

$('.yesnoradios input[type=radio]:checked').length

This will give you the exact no of groups which have been checked. Check it with the no of class="yesnoradios" and if you have the same no then at least one of the radios in each yesnoradio div have been checked

if($('.yesnoradios').length == $('.yesnoradios input[type=radio]:checked').length){
    //all groups have at least one radio checked
}else{
    //not all are chedked and you can loop your else logic here
}

Note: All your radios in one group should have same name… and since you have posted unrendered html here i’d assume that it does so.