Validate radio button with javascript

Question

Validate radio button with javascript

Navigation

#1 by (3 votes)

0

I have a form where I have to validate the name, the schedule if it is morning or afternoon and accept the registration rules.

With what I have problems, it is the subject of the schedule, I have two radio buttons but I can not validate that one of the two is selected.

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>

javascript radiobutton

asked by davescode 27.11.2018 в 11:42

source

1 answer

AngularJS filter by arrangement on property of the object How to restrict routes or url in laravel 5.7 to each user?

score 3 · Accepted Answer

To group radio inputs are grouped by the name attribute, in order to obtain if there is some radio input checked, it has to be checked in the following way:

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

With the selector you get all input with name horario that are 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>