martes, 30 de marzo de 2010

Validar radios con jQuery

Cuando comence a desarrollar y me tome con validación de radios con javascript, en verdad la sufri, ya que me tope con varias incosistencias al realizar la validación.

Ya desde hace un buen rato jQuery me hizo la vida más facil, así que te comparto como poder validar estos elementos.

Veamos entonces validar un  conjunto de elementos radio.

   var miVariable= "";
   $("#form1 input[name='tagNameElemento']:radio").each(function(i){
        if ($(this).is(':checked')) {
           
miVariable = $(this).val();
        }
    });  


Ahora expliquemos que significa el codigo anterior.

  var miVariable= "";

Declaramos una variable, con el nombre que gustes, la cual servira como contenedora para validar si un radio del grupo de radios fue seleccionado.

$("#form1 input[name='tagNameElemento']:radio")

Para entender esta parte, deberias estar un poco mas indentificado con los tipos de selectores que maneja jQuery. Esa linea la interpretamos como:  "Selecciona los elementos inputs con el tagName (el que le indicamos) de tipo radio."
 
 .each(function(i){});


Ahora comenzamos con la parte mas importante que nos ayudara a iterar con los elementos radio que necesitamos validar. (Para mas información de each aqui)


Y por ultimo la validacón para que nuestra variable contenedora le asignemos un valor.

        if ($(this).is(':checked')) {
           
miVariable = $(this).val();
        }


Ya solo tendriamos que valida la longitud de nuestra variable miVariable.length != 0 para revisar que por lo menos se hizo la seleccion de un radio.

Solo recuerda que todo esto debe estar dentro de una funcion de javascript.

Ojala que te sirva esta breve explicación. 

4 comentarios:

  1. Me alegro que te haya servido!

    Saludos.

    ResponderEliminar
  2. $("#form1 input[name='tagNameElemento']:radio")a mi me falto una tilde despues de #form1 osea:

    $("#form1, input[name='tagNameElemento']:radio")

    ResponderEliminar