Validierung der Optionsschaltflächengruppe mit dem jQuery-Validierungs-Plugin

Question

Wie führt man eine Validierung für eine Radio-Button-Gruppe (ein Radio-Button sollte ausgewählt werden) mit jQuery Validation Plugin?

Answer 1

Bei neueren Versionen von Jquery (1.3+, glaube ich) müssen Sie nur eines der Elemente des Radio-Sets 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 diesem Fall muss mindestens eine der 3 Optionen mit dem Namen "Meine Optionen" ausgewählt werden, bevor Sie fortfahren können.

Der Vorschlag von Mahes für das Etikett funktioniert übrigens wunderbar!

Answer 2

Verwenden Sie die folgende Regel zur Überprüfung der Auswahl von Optionsschaltflächengruppen

myRadioGroupName : {required :true}

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

Answer 3

Sie können auch dies 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 können.

Answer 4

Wie in der Antwort von Brandon. Aber wenn Sie ASP.NET MVC verwenden, die unaufdringliche Validierung verwendet, können Sie das data-val-Attribut zum ersten hinzufügen. Ich mag auch Beschriftungen für jedes Optionsfeld für Benutzerfreundlichkeit haben.

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

Answer 5

Eine andere Möglichkeit der Validierung ist die folgende.

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

Ich hoffe, mein Beispiel wird Ihnen helfen