web-dev-qa-db-fra.com

Validation du groupe de boutons radio à l'aide du plug-in de validation jQuery

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

jqueryvalidation
124
user27052

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 l’appareil radio requis et jquery se chargera 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 qu'au moins une des trois options radio avec le nom de "mes options" soit sélectionnée avant de poursuivre.

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

110
Brandon Rome

utiliser la règle suivante pour valider la sélection du groupe de boutons d'option

myRadioGroupName : {required :true}

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

23
Mahes

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.

18
Haider Abbas

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

3
strudeltercero

Selon la réponse de Brandon. Toutefois, si vous utilisez ASP.NET MVC, qui utilise une validation non intrusive, vous pouvez ajouter l'attribut data-val au premier. J'aime aussi avoir des étiquettes pour chaque bouton radio pour plus de facilité d'utilisation.

<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>
3
Matt Frear

code pour le 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>
3
Sayli Vaidya

J'ai eu le même problème. Wound up juste en écrivant une fonction personnalisée de surbrillance et de non sélection pour le validateur. Ajouter ceci aux options validaton 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);
            }
        },
2
Cin

Met 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 -->
0
Sonobor