3

Tengo varios inputs en mi plantilla, por ejemplo tengo estos 3 y un botón de siguiente desactivado.

Como puedo validar que solo el input de nombre y apellido estén llenos y se active el botón de siguiente. Por el momento si escribo el nombre se activa el boton, pero quiero que el nombre y apellido esten llenos y recien se active el boton de siguiente

var b = document.getElementById('button');
var input = document.getElementById("inputtext");

input.addEventListener("input", displayButton); 

function displayButton() {
  if (input.value === "") {
    b.disabled = true;
  } else {
    b.disabled = false;
  }
}

displayButton();
<input type="text" id="inputtext" placeholder="Nombre">
<input type="text" id="inputtext2" placeholder="Apellido">
<input type="text" id="inputtext3" placeholder="Telefono">
<button id="button">Siguiente</button>

Intenté con

var input = document.querySelectorAll("#inputtext, #inputtext2")

pero no funciona, agradezco su ayuda

1 respuesta 1

2

El planteamiento a seguir podría ser el siguiente:

  1. El botón "siguiente" parte con estado disabled
  2. Capturas todos los inputs en una variable a través de la función querySelectorAll
  3. Recorres mediante un bucle los inputs capturados para añadirles un evento oninput.
  4. Cada vez que el evento se ejecute, capturamos los valores de los inputs "nombre" y "apellido" para comprobar su longitud. Si la longitud de ambos es superior a 0 entonces activamos el botón siguiente, en caso contrario lo desactivamos.

const b = document.getElementById('button');
const inputs = document.querySelectorAll('input');

inputs.forEach(function(input) {
  input.addEventListener("input", displayButton); 
})

function displayButton() {
  const nombre = document.getElementById('inputtext').value
  const apellido = document.getElementById('inputtext2').value
  
  if (nombre.length > 0 && apellido.length > 0) {
    b.disabled = false
  }
  else {
    b.disabled = true
  }
}
<input type="text" id="inputtext" placeholder="Nombre">
<input type="text" id="inputtext2" placeholder="Apellido">
<input type="text" id="inputtext3" placeholder="Telefono">

<button id="button" disabled>Siguiente</button>

Referencias: querySelectorAll, forEach

1
  • Gracias, me sirvió de ayuda. Como podría agregar un mensaje de error si hago clic en el botón siguiente antes de llenar los campos de nombre y apellido
    – ele0603
    el 30 ago. a las 19:03

Tu Respuesta

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

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