Come eseguire la convalida per un gruppo di pulsanti di opzione (è necessario selezionare un pulsante di opzione) utilizzando il plug-in di convalida jQuery?
Come eseguire la convalida per un gruppo di pulsanti di opzione (è necessario selezionare un pulsante di opzione) utilizzando il plug-in di convalida jQuery?
Risposte:
Con le versioni più recenti di jquery (1.3+ credo), tutto ciò che devi fare è impostare uno dei membri del set radio richiesto e jquery si occuperà del resto:
<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
Quanto sopra richiederebbe almeno 1 delle 3 opzioni radio con il nome di "mie opzioni" da selezionare prima di procedere.
Il suggerimento dell'etichetta di Mahes, a proposito, funziona meravigliosamente!
focusInvalid: false
alle validate()
opzioni impedirà l'evidenziazione del primo pulsante di opzione.
utilizzare la seguente regola per convalidare la selezione del gruppo di pulsanti di opzione
myRadioGroupName : {required :true}
myRadioGroupName è il valore assegnato all'attributo name
label
tag per l'errore, in realtà il plugin aggiunge automaticamente questo tag dell'etichetta di errore.
Puoi anche usare questo:
<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>
e aggiungi semplicemente questa regola
rules: {
'myoptions[]':{ required:true }
}
Indica come aggiungere regole.
name="myoptions[]"
è un po 'confuso poiché suggerisce che possono essere restituiti più valori.
Secondo la risposta di Brandon. Ma se si utilizza ASP.NET MVC che utilizza la convalida discreta, è possibile aggiungere l'attributo data-val al primo. Mi piace anche avere etichette per ogni pulsante di opzione per usabilità.
<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>
Un altro modo per convalidare è come questo.
var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");
Spero che il mio esempio ti possa aiutare
Ho avuto lo stesso problema. Completa la scrittura di una funzione di evidenziazione personalizzata e di non evidenziazione per il validatore. Aggiungendo questo alle opzioni validaton si dovrebbe aggiungere la classe di errore all'elemento e la sua rispettiva etichetta:
'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);
}
},
codice per pulsante di opzione -
<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"/>
e codice jQuery-
<script>
$(document).ready(function () {
$('#create').click(function(){
var gender=$('#Gender').val();
if ($("#Gender:checked").length == 0){
$('.GenderValidation').text("Gender is required.");
return false;
}
});
});
</script>
Mette il messaggio di errore in cima.
<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 -->