submithandler - Validación del grupo de botones de opción con el complemento de validación de jQuery

jquery validation rules

Question

¿Cómo se realiza la validación para un grupo de botones de opción (se debe seleccionar un botón de opción) usando el complemento de validación jQuery?

Answer 1

Con las versiones más nuevas de jquery (más de 1.3+), todo lo que tienes que hacer es configurar uno de los miembros del equipo de radio para que se requiera y jquery se encargará 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

Lo anterior requerirá al menos 1 de las 3 opciones de radio con el nombre de "mis opciones" para ser seleccionado antes de continuar.

¡La sugerencia de etiqueta de Mahes, por cierto, funciona maravillosamente!

Answer 2

Otra forma de validar es así.

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

Espero que mi ejemplo te ayude

Answer 3

Según la respuesta de Brandon. Pero si usa ASP.NET MVC que usa una validación discreta, puede agregar el atributo data-val al primero. También me gusta tener etiquetas para cada botón de opción.

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

También puedes usar esto:

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

y simplemente agrega esta regla

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

Mencione cómo agregar reglas.

Answer 5

Yo tuve el mismo problema. Herido simplemente escribiendo una función resaltada y no iluminada personalizada para el validador. Agregando esto a las opciones de validación debería agregar la clase de error al elemento y su respectiva etiqueta:

        ''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);
            }
        },

Answer 6

código para el botón de 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"/>

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

Answer 7

utilice la siguiente regla para validar la selección del grupo de botones de opción

myRadioGroupName : {required :true}

myRadioGroupName es el valor que le ha dado al atributo de nombre