0

Intenté hacer una validación como abajo pero antes de entrar al if me da este error:

formulario.js:83 Uncaught TypeError: Cannot read properties of null (reading 'value')

Lo que intento hacer es que seleccionen una opción.

    var resp1 = document.querySelector('input[name="1"]:checked').value;

    if (resp1.length > 0)  
    {  
      console.log(resp1);       
    }
    else if(resp1 === 'undefined')
    {
      console.log('Necesita seleccionar una opcion' + resp1);
    }
1
  • Pues básicamente te está diciendo que document.querySelector('input[name="1"]:checked') es null y no puedes acceder a sus propiedades. Básicamente, no está encontrando input[name="1"]:checked.
    – user314976
    Commented el 31 dic. 2022 a las 18:08

1 respuesta 1

0

Buen dia!

El pseudo-selector :checked selecciona los inputs que están seleccionados, entonces al no seleccionar el input el método querySelector retorna null, ya que no hay ningún elemento que coincida con el selector.

Para realizar la validación con JavaScript seria de esta manera:

// Selecciona el input sin importar si esta :checked o no
// si deseas seleccionar si o si un input que sea de tipo
// checkbox usa el siguiente selector:
// 'input[name="1"][type="checkbox"]'

const resp1 = document.querySelector('input[name="1"]');

// Tip: te recomiendo usar 'let' o 'const' en lugar de 'var'
// ya que su uso es considerado una mala practica.

// Los inputs de tipo checkbox tiene la propiedad 'checked'
// que es un boolean respectivamente de si esta o no
// seleccionada la casilla.
// Solo nos queda evaluar si esta o no seleccionada.

if (resp1.checked) {
  console.log(resp1.value)
} else {
  console.log('Necesita seleccionar una opción')
}

Los input ya tienen el atributo required por defecto por lo que al tratar de enviar el formulario te pedirá que selecciones la casilla, de esta manera:

<form>
  <input
    type="checkbox"
    name="1"
    value="Uno"
    required
  />
  <button type="submit">Enviar</button>
</form>

BONUS

Este tipo de inputs independiente de estar o no seleccionado siempre te devolverá el valor "on" si, no le pones ningún valor en el atributo 'value' del HTML

2
  • Paul, convierte el código a snippet solo si es un código reproducible en la pregunta/respuesta misma. En el caso de la pregunta, el cambio era innecesario, ya que el error no se visualizaba.
    – padaleiana
    Commented el 2 ene. 2023 a las 10:12
  • Gracias padaleina, lo tendré en cuenta, ya que soy nuevo en la plataforma 😊 Commented el 2 ene. 2023 a las 15:14

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.