Validation différents boutons radio avec jQuery

Question

J'ai 3 différents groupes de boutons radio dans jQuery comme ceci:

<tr class="toValidate"> 
    <td>Please rate question 1</td> 
    <td>Yes<input type="radio" name="question1" value="yes" /></td> 
    <td>No<input type="radio" name="question1" value="no" /></td> 
    <td style='display:none'>ERROR GOES HERE</td> 
</tr> 
<tr class="toValidate" > 
    <td>Please rate question 2</td> 
    <td>Yes<input type="radio" name="question2" value="yes" /></td> 
    <td>No<input type="radio" name="question2" value="no" /></td> 
    <td style='display:none'>ERROR GOES HERE</td> 
</tr> 

J'ai besoin que lorsque l'utilisateur soumet le formulaire, il boucle à travers les groupes de boutons radio et pour chaque groupe qui n'a pas d'option sélectionnée, le dernier td indiquant le message d'erreur est affiché. Si les deux ne sont pas sélectionnés, les deux messages d'erreur sont affichés, pas seulement le premier.

Une aide?

Un grand merci à l'avance

Answer 1

if ($('input[name=question1]:checked').length == 0) { 
    // Display an error for question1 
} 
if ($('input[name=question2]:checked').length == 0) { 
    // Display an error for question2 
} 

Si vous avez un grand nombre de boutons pour valider, vous pourriez faire quelque chose comme:

var questions = ['question1', 'question2']; 
for(var i = 0; i < questions.length; i++) { 
    if ($('input[name=' + questions[i] + ']:checked').length == 0) { 
     // Display an error for questions[i] 
    } 
} 

En aparté, ** * S'IL VOUS PLAÎT * utilisez la balise <label> pour identifier correctement l'étiquette de votre bouton radio. Les utilisateurs devraient être en mesure de cliquer sur "Oui" et pas seulement sur le petit cercle du bouton radio lui-même.

Soit:

<td><label for="question1-yes">Yes</label><input type="radio" name="question1" value="yes" id="question1-yes" /></td> 

Ou:

<td><label>Yes<input type="radio" name="question1" value="yes" /></label></td> 

Answer 2

J'ai légèrement modifié votre balisage pour inclure class="error"

<tr class="toValidate"> 
<td>Please rate question 1</td> 
<td>Yes<input type="radio" name="question1" value="yes" /></td> 
<td>No<input type="radio" name="question1" value="no" /></td> 
<td class="error" style='display:none'>ERROR GOES HERE</td> 
</tr> 
<tr class="toValidate" > 
<td>Please rate question 2</td> 
<td>Yes<input type="radio" name="question2" value="yes" /></td> 
<td>No<input type="radio" name="question2" value="no" /></td> 
<td class="error" style='display:none'>ERROR GOES HERE</td> 
</tr> 

L'extrait ci-dessous devrait faire ce que vous avez besoin.

$('tr').each(function(){ 
    var currValue = $(':radio:checked', this).val(); 
    if (currValue!= "yes" || currValue != "no"){ 
     $(this).find('.error').show(); 
    } 
});