Validation du groupe de boutons radio à l'aide du plugin de validation jQuery

Comment effectuer la validation d'un groupe de boutons radio (un bouton radio doit être sélectionné) à l'aide du plugin de validation jQuery?

Avec les nouvelles versions de jquery (1.3+ je pense), tout ce que vous avez à faire est de définir l'un des membres de la radio comme requis et jquery s'occupera du reste:

<input type="radio" name="myoptions" value="blue" class="required"> Blue<br />
<input type="radio" name="myoptions" value="red"> Red<br />
<input type="radio" name="myoptions" value="green"> Green

Ce qui précède nécessiterait au moins 1 des 3 options radio avec le nom de «mes options» à sélectionner avant de continuer.

La suggestion d'étiquette de Mahes, d'ailleurs, fonctionne à merveille!

utilisez la règle suivante pour valider la sélection de groupe de boutons radio

myRadioGroupName : {required :true}

myRadioGroupName est la valeur que vous avez donnée à l'attribut name

Vous pouvez également utiliser ceci:

<fieldset>
<input type="radio" name="myoptions[]" value="blue"> Blue<br />
<input type="radio" name="myoptions[]" value="red"> Red<br />
<input type="radio" name="myoptions[]" value="green"> Green<br />
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label>
</fieldset>

et ajoutez simplement cette règle

rules: {
 'myoptions[]':{ required:true }
}

Mentionnez comment ajouter des règles.

Selon la réponse de Brandon. Mais si vous utilisez ASP.NET MVC qui utilise une validation discrète, vous pouvez ajouter l'attribut data-val au premier. J'aime aussi avoir des étiquettes pour chaque bouton radio pour la convivialité.

<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span>
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p>
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p>
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>

Une autre façon de valider est comme ça.

var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");

J'espère que mon exemple vous aidera

J'ai eu le même problème. Bloqué juste en écrivant une fonction de surbrillance personnalisée et de désactivation pour le validateur. L'ajout de ceci aux options de validation devrait ajouter la classe d'erreur à l'élément et son étiquette respective:

        'highlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").addClass(errorClass);
                    $(this).addClass(errorClass);
                });
            } else {
                $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
                $(element).addClass(errorClass);
            }
        },
        'unhighlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass);
                    $(this).removeClass(errorClass);
                });
            }else {
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                $(element).removeClass(errorClass);
            }
        },

code pour bouton radio -

<div>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Female",false) Female</span>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Male",false) Male</span>                                                        
<div class='GenderValidation' style="color:#ee8929;"></div>    
</div> 

<input class="btn btn-primary" type="submit" value="Create" id="create"/>

et jQuery code-

<script>
    $(document).ready(function () {
        $('#create').click(function(){

            var gender=$('#Gender').val();
            if ($("#Gender:checked").length == 0){
                $('.GenderValidation').text("Gender is required.");
                return false;
            }
        });
    });
</script>

Place le message d'erreur en haut.

   <style> 

 .radio-group{ 
      position:relative; margin-top:40px; 
 } 

 #myoptions-error{ 
     position:absolute; 
     top: -25px; 
  } 

 </style> 

 <div class="radio-group"> 
 <input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> 
 <input type="radio" name="myoptions" value="red"> Red<br /> 
 <input type="radio" name="myoptions" value="green"> Green </div>
 </div><!-- end radio-group -->