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 originalvar form = document.forms.form1; //Tomo al formulario
form.addEventListener("submit", function(event){
event.preventDefault(); //Cancelo el envío
var sexo = this.elements.sexo.value, //El valor para "sexo"
pais = this.elements.pais.value, //El valor para "país"
color = this.elements.color.value; //El valor para "color"
if (sexo && pais && color){ //Si se seleccionaron opciones para los tres ítems
this.submit(); //Envío el formulario
}
else{
alert("Debe de seleccionar una opción para cada ítem");
}
}, 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