2

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>

1 respuesta 1

2

Una solución rápida: en lugar de comprobar radio por radio si están marcados, comprueba cuál es el valor del campo en general. Como todos los radios tienen un valor diferente (y distinto de la cadena vacía), si el valor del campo es la cadena vacía (""), entonces sabrás que ninguno está marcado y te ahorrarás tener que comprobar cada radio como hasta ahora:

var validarRadio = function (e){
  if(formulario.sexo.value == "") {
    alert('Completa el campo sexo');
    e.preventDefault();
  }
};

El código quedaría así:

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.value == "") {
      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);
}());
<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
    <input type="radio" name="sexo" id="Alien" value="Alien"> Alien
    <input type="radio" name="sexo" id="Indefinido" value="Indefinido"> Indefinido
    <input type="radio" name="sexo" id="Pulpo" value="Pulpo"> Pulpo
    <input type="radio" name="sexo" id="NA" value="na"> N/A
  <br>

  <input type="checkbox" name="terminos" id="terminos" > Terminos y condiciones
  <br>

  <input type="submit" name="btn" value="Enviar" id="btn">

</form>

3
  • Osea que basicamente si mi radio no esta vacio pasa la 'prueba'. Yo mas que nada es por si en el futuro deseara agregar mas radio buttons, no tener que modificar el html y el js . MUCHISIMAS GRACIAS!!
    – Pepper 92
    Commented el 12 sept. 2016 a las 16:12
  • 1
    Sí, esa es la idea. Como puedes ver he agregado unos cuantos radio buttons más para que veas que funciona igual con 2 y con 6
    – Alvaro Montoro
    Commented el 12 sept. 2016 a las 16:13
  • Buenisimo! Mil gracias Alvaro!
    – Pepper 92
    Commented el 12 sept. 2016 a las 16:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.