Queria saber si habria alguna forma de que mi script pueda manejar la cantidad de radio buttons que yo le meta y no tener que refactorizar mi codigo js. Alguien me podria dar una mano? tengo una idea de poner un event listener a todo los radio buttons. Muchas gracias
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" name="formulario" method="get">
<input type="text" name="nombre" id="nombre" maxlength="30" onfocus="fondoColor(this)" placeholder="Tu nombre">
<br>
<input type="radio" name="sexo" id="Hombre"value="Hombre"> Hombre
<input type="radio" name="sexo" id="Mujer"value="Mujer"> Mujer
<br>
<input type="checkbox" name="terminos" id="terminos" > Terminos y condiciones
<br>
<input type="submit" name="btn" value="Enviar" id="btn">
</form>
<script>
function fondoColor(nombrefield){
nombrefield.style.background ="yellow";
};
(function(){
var formulario = document.getElementsByName('formulario')[0],
elementos = formulario.elements,
boton = document.getElementById('btn');
var validarNombre = function(e){
if(formulario.nombre.value == 0){
alert('Completa el campo nombre');
e.preventDefault();
}
};
var validarRadio = function (e){
if(formulario.sexo[0].checked == true || formulario.sexo[1].checked == true){
}else{
alert('Completa el campo sexo');
e.preventDefault();
}
};
var validarCheckbox = function(e){
if(formulario.terminos.checked == false){
alert('Acepta los terminos y condiciones');
e.preventDefault();
}
};
var validar = function (e){
validarNombre(e);
validarRadio(e);
validarCheckbox(e);
};
formulario.addEventListener("submit", validar);
}());
</script>