Foros del Web » Programando para Internet » Javascript »

Validar varios input radio

Estas en el tema de Validar varios input radio en el foro de Javascript en Foros del Web. Hola buenas noches gente! estoy con un formulario que tiene 3 secciones de radios ejemplo <form name="form1" method="post" action="enviar.php"> seleccionar sexo > <input type="radio" name="sexo"> ...
  #1 (permalink)  
Antiguo 29/09/2014, 17:47
 
Fecha de Ingreso: mayo-2010
Mensajes: 93
Antigüedad: 14 años
Puntos: 3
Exclamación Validar varios input radio

Hola buenas noches gente! estoy con un formulario que tiene 3 secciones de radios
ejemplo

<form name="form1" method="post" action="enviar.php">
seleccionar sexo
> <input type="radio" name="sexo">
> <input type="radio" name="sexo">

seleccionar pais
> <input type="radio" name="pais">
> <input type="radio" name="pais">
seleccionar color favorito
> <input type="radio" name="color">
> <input type="radio" name="color">

Necesito que con javascript pueda validar antes de que accione el enviar.php , que de cada grupo de inputs este uno seleccionado si o si. Osea un sexo, un pais y un color.
que salte un mensaje y no accione el enviar.php... he visto varios pero no logro hacerlo con varios grupos de inputs en un solo form! por favor help!
__________________
Mi web de estética www.estarmaslinda.com.ar
  #2 (permalink)  
Antiguo 30/09/2014, 00:47
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Validar varios input radio

Para realizar una validación antes de que se envíen los datos del formulario, necesitas cancelar el evento submit, para lo cual puedes hacer uso del método preventDefault. Luego, verifica si los radio button han sido seleccionados comprobando si tienen un valor y de ser así con todos, entonces envías los datos a procesarse con el método submit, caso contrario, muestras un mensaje de alerta en el que le indicas al usuario que debe de seleccionar una opción para cada ítem.

Código Javascript:
Ver original
  1. var form = document.forms.form1; //Tomo al formulario
  2.  
  3. form.addEventListener("submit", function(event){
  4.     event.preventDefault(); //Cancelo el envío
  5.     var sexo = this.elements.sexo.value, //El valor para "sexo"
  6.         pais = this.elements.pais.value, //El valor para "país"
  7.         color = this.elements.color.value; //El valor para "color"
  8.    
  9.     if (sexo && pais && color){ //Si se seleccionaron opciones para los tres ítems
  10.         this.submit(); //Envío el formulario
  11.     }
  12.     else{
  13.         alert("Debe de seleccionar una opción para cada ítem");
  14.     }
  15. }, false);

Cuando no seleccionas un valor para un grupo de radio button con el mismo nombre, el valor es nulo. Al hacer así la condición, verificas si existe un valor para cada una de dichas variables, es decir, que no sean nulas. Ojo, no olvides asignar valores para los radio button, para cada uno de ellos.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 30/09/2014, 10:46
 
Fecha de Ingreso: mayo-2010
Mensajes: 93
Antigüedad: 14 años
Puntos: 3
Respuesta: Validar varios input radio

Muchas gracias! voy a implementarlo y ver como me va.. saludos!!
__________________
Mi web de estética www.estarmaslinda.com.ar

Etiquetas: form, input, radio, submit
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:45.