it-swarm.com.de

Überprüfung der Optionsfeldgruppe mit dem Plugin zur Überprüfung von jQuery

Wie führe ich eine Validierung für eine Optionsfeldgruppe durch (ein Optionsfeld sollte ausgewählt sein)?

124
user27052

Bei neueren Versionen von jquery (glaube ich 1.3+) müssen Sie lediglich eines der Mitglieder des Funkgeräts als erforderlich festlegen, und jquery kümmert sich um den Rest:

<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

In den oben genannten Fällen muss mindestens eine der drei Funkoptionen mit dem Namen "Meine Optionen" ausgewählt sein, bevor Sie fortfahren können.

Der Label-Vorschlag von Mahes funktioniert übrigens wunderbar!

110
Brandon Rome

verwenden Sie die folgende Regel, um die Auswahl der Optionsfeldgruppen zu überprüfen

myRadioGroupName : {required :true}

myRadioGroupName ist der Wert, den Sie dem Attribut name gegeben haben

23
Mahes

Sie können dies auch verwenden:

<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>

und füge einfach diese Regel hinzu

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

Erwähnen Sie, wie Regeln hinzugefügt werden.

18
Haider Abbas

Eine andere Möglichkeit zur Validierung ist wie folgt.

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

Ich hoffe, mein Beispiel wird Ihnen helfen

3
strudeltercero

Laut Brandons Antwort. Wenn Sie jedoch ASP.NET MVC verwenden, das eine unauffällige Überprüfung verwendet, können Sie das data-val-Attribut zum ersten hinzufügen. Ich möchte auch Labels für jedes Optionsfeld haben, um die Benutzerfreundlichkeit zu verbessern.

<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 für Optionsfeld -

<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"/>

und 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

Ich hatte das gleiche problem Abschließend wurde eine benutzerdefinierte Hervorhebungs- und Hervorhebungsfunktion für den Prüfer geschrieben. Wenn Sie dies zu den Validierungsoptionen hinzufügen, sollte die Fehlerklasse dem Element und seiner jeweiligen Bezeichnung hinzugefügt werden:

        '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

Setzt die Fehlermeldung an die Spitze.

   <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