1

tengo un formulario donde tengo que validar el nombre, el horario si es de mañana o tardes y aceptar las normas del registro.

Con lo que tengo problemas, es el tema del horario, tengo dos radio buttons pero no consigo validar que uno de los dos este seleccionado.

function validar(){
        
        valor = document.getElementById('nombre').value;
        
        if( valor == null || valor.length == 0) {
          alert('Error, rellena el campo nombre');
        return false;
        }
        
        
        
        
        if(!registro.checked ){
          alert('Debe aceptar el registro');
          return false;
        }
}
        
       <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <script src="script.js"></script>
      </head>
      <body>
    <form id="formulario" onsubmit="validar()">
          <label>Nombre: </label><br>
          <input type="text" id="nombre" name="nombre">
    
          <br><br>
    
          <label>Horario:</label><br>
              <input type="radio" id="horario" value="mañana"><label>Mañana</label>
            <br>
            <input type="radio" id="horario" value="tarde"><label>Tarde</label>
    
            <br><br>
    
          <label>Aceptar las normas de registro:</label><br>
          <input type="checkbox" name="registro" value="registro" id="registro">
    <br><br>
          <input type="submit" value="Enviar">
    </form>
      </body>
    </html>

2 respuestas 2

5

Para agrupar radio inputs se agrupan por el atributo name, en cuanto a obtener si hay algún radio input checqueado, se ha de comprobar de la siguiente manera:

document.querySelector('input[name="horario"]:checked')

Con el selector se obtiene todos los input con nombre horario que estén checked === true.

// bindamos al evento submit del elemento formulario la función de validación
document.getElementById("formulario").addEventListener("submit", function(event){
    let hasError = false;
    valor = document.getElementById('nombre').value;

    if( valor == null || valor.length == 0) {
      alert('Error, rellena el campo nombre');
      hasError = true;
    }

    // obtenemos todos los input radio del grupo horario que esten chequeados
    // si no hay ninguno lanzamos alerta
    if(!document.querySelector('input[name="horario"]:checked')) {
      alert('Error, rellena el campo horario');
      hasError = true;
      }

    if(!registro.checked ){
      alert('Debe aceptar el registro');
      hasError = true;
    }
    
    // si hay algún error no efectuamos la acción submit del form
    if(hasError) event.preventDefault();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="script.js"></script>
  </head>
  <body>
<form id="formulario">
      <label>Nombre: </label><br>
      <input type="text" id="nombre" name="nombre">

      <br><br>

      <label>Horario:</label><br>
          <input type="radio" name="horario" value="mañana"><label>Mañana</label>
        <br>
        <input type="radio" name="horario" value="tarde"><label>Tarde</label>

        <br><br>

      <label>Aceptar las normas de registro:</label><br>
      <input type="checkbox" name="registro" value="registro" id="registro">
<br><br>
      <input type="submit" value="Enviar">
</form>
  </body>
</html>

1
  • Excelente, justo lo que buscaba :)))
    – patoromo
    Commented el 24 ago. 2019 a las 17:23
1

// Emplearemos este selector
    document.querySelector('input[name="horario"]:checked')
    checkProvider();
    function checkProvider()
    {
       let check = document.querySelector('input[name="provider"]:checked')
       if(check !== null) console.log('Provider', check);
       else console.log('Favor seleccione el proveedor');
    }

1
  • Pulsa en editar y describe cómo este código responde a la pregunta. Y por cierto, ¿en qué difiere tu respuesta con la aceptada (más completa)?
    – padaleiana
    Commented el 29 ene. a las 14:07

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.