Validierung der Optionsfeldgruppe mit dem jQuery-Validierungs-Plugin

128

Wie führe ich eine Validierung für eine Optionsfeldgruppe durch (ein Optionsfeld sollte ausgewählt sein) mit dem jQuery-Validierungs-Plugin?

user27052
quelle
Schauen Sie die Antwort von c.reeves in forum.jquery.com/topic/…
Es gibt einen neuen jQuery-Validator, der sehr leistungsfähig und einfach zu bedienen ist. Sie können es überprüfen: code.google.com/p/bvalidator
Nenad
Ich möchte nicht die gesamte Bibliothek für so etwas Einfaches einschließen
Doug Molineux

Antworten:

113

Bei neueren Versionen von jquery (1.3+, glaube ich) müssen Sie lediglich eines der erforderlichen Mitglieder des Funkgeräts einstellen, 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

Für das oben Gesagte muss mindestens eine der drei Funkoptionen mit dem Namen "Meine Optionen" ausgewählt werden, bevor Sie fortfahren können.

Der Label-Vorschlag von Mahes funktioniert übrigens wunderbar!

Brandon Rom
quelle
Dies ist jetzt die beste Antwort für mich mit den Updates für jQuery. +1.
Kieran Andrews
6
Das einzige Problem dabei ist, dass jQuery validate das erste Optionsfeld rot hervorhebt, wenn keines von ihnen aktiviert ist. In Wirklichkeit möchten Sie jedoch wahrscheinlich ALLE hervorheben. Sobald Sie ein Optionsfeld aktiviert haben, sollte das Rot verschwinden.
Haacked
2
@Haacked Sie könnten die Rückruffunktion errorPlacement in den Validierungsoptionen verwenden, um die Fehlermeldung an einer sinnvollen Stelle zu platzieren?
Autonomatt
2
@Haacked: Durch Hinzufügen focusInvalid: falsezu den validate()Optionen wird das Hervorheben des ersten Optionsfelds verhindert.
Jim Miller
2
Ich mache es immer so und positioniere die Fehlerbezeichnung in der errorPlacement-Funktion. Dies ist, was ich für Optionsfelder mache: if (element.is ("input: radio")) {error.insertAfter (element.parent ()); } else {error.insertAfter (Element); }
Francisco Goldenstein
24

Verwenden Sie die folgende Regel, um die Auswahl der Optionsfeldgruppe zu überprüfen

myRadioGroupName : {required :true}

myRadioGroupName ist der Wert, den Sie dem Namensattribut gegeben haben

Mahes
quelle
15
Beachten Sie, dass Sie, wenn Sie die Position des Etiketts steuern möchten, Ihr eigenes Fehleretikett an der gewünschten Stelle mit dem gewünschten Text versehen können: <label for = "myRadioGroupName" class = "error" style = "display: none; "> Bitte wählen Sie eine aus. </ Label>
Tom
@ Tom es ist sinnlos, sich das labelTag für den Fehler selbst zu schreiben , tatsächlich fügt das Plugin dieses Fehler-Label-Tag automatisch hinzu.
Ahmehri
3
Vor ziemlich langer Zeit, aber ich stelle mir vor, ich habe versucht, das <label> an einer anderen Stelle im DOM zu platzieren, anstatt dort, wo es vom Plugin automatisch erstellt wurde. Es ist auch gut möglich, dass sich das Plugin-Verhalten in den letzten 5 Jahren geändert hat ...
Tom
Traurig, wie es für benutzerdefinierte Fehler den "Namen" anstelle des "Typs" hier erfordert.
justdan23
19

Sie können auch Folgendes 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ügen Sie einfach diese Regel hinzu

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

Erwähnen Sie, wie Sie Regeln hinzufügen.

Haider Abbas
quelle
1
Dies würde jedoch zu Fehlern bei der HTML5-Validierung führen, da das for-Attribut meiner Meinung nach eine ID-Referenz sein muss (für die wir nicht drei Optionsfelder auf dieselbe ID setzen können).
Armyofda12mnkeys
1
Es gibt einen großen Unterschied zwischen dem Attribut name und dem Attribut id.
Norman H
2
Bitte beachten Sie, dass ein Optionsfeld nur einen Wert zurückgeben sollte. Dies name="myoptions[]"ist etwas verwirrend, da darauf hingewiesen wird, dass mehrere Werte zurückgegeben werden können.
Dementic
Setzt die Fehlermeldung oben. <style> .radio-group {position: relative; Rand oben: 40px; } # myoptions-error {Position: absolut; oben: -25px; } </ style> <div class = "radio-group"> <input type = "radio" name = "myoptions" value = "blue" class = "required"> Blau <br /> <input type = "radio" name = "myoptions" value = "red"> Rot <br /> <input type = "radio" name = "myoptions" value = "green"> Grün </ div> </ div> <! - end radio- Gruppe ->
Sonobor
4

Nach Brandons Antwort. Wenn Sie jedoch ASP.NET MVC verwenden, das eine unauffällige Validierung verwendet, können Sie das Attribut data-val zum ersten hinzufügen. Ich habe auch gerne Beschriftungen für jedes Optionsfeld, um die Benutzerfreundlichkeit zu gewährleisten.

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

Eine andere Möglichkeit zur Validierung ist folgende.

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

Ich hoffe mein Beispiel wird Ihnen helfen

strudeltercero
quelle
2

Ich hatte das gleiche Problem. Wir haben gerade eine benutzerdefinierte Hervorhebungs- und Hervorhebungsfunktion für den Validator 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);
            }
        },
Cin
quelle
2

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>
Sayli Vaidya
quelle
0

Setzt die Fehlermeldung oben.

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