Cómo deshabilitar el botón de envío hasta que el usuario ingrese todos los campos y también cómo usar el detector de eventos en el formulario de envío.
<form action='index.html' id="form-user" onsubmit="init()"> <input type="text" name="username" id="username" placeholder="username"> <input type="email" name="email" id="email" placeholder="email"> <input type="password" name="password" id="password" placeholder="password"> <button type="submit" name="submit" id='button-send'>SUBMIT</button> </form> const init = function () { let username = document.getElementById("username").value; let password = document.getElementById("password").value; let email = document.getElementById("email").value; alert(username,password,email) };Configure un objeto de validación con valores booleanos para registrar si todos sus valores han cumplido con la validación.
Luego, recorrería todas sus entradas y agregaría un detector de eventos a cada una de ellas. En este ejemplo, verifiqué si cada uno tiene al menos un carácter, pero es posible que desee ampliar esto.
Finalmente, recorra su objeto de validación y verifique si todos los valores son verdaderos. Si es así, elimine el atributo disabled del botón.
let inputs = document.querySelectorAll('input'); let buttonSend = document.getElementById('button-send'); let inputValidator = { "username": false, "email": false, "password": false } inputs.forEach((input) => { input.addEventListener('input', () => { let name = event.target.getAttribute('name'); if (event.target.value.length > 0) { inputValidator[name] = true; } else { inputValidator[name] = false; }; let allTrue = Object.keys(inputValidator).every((item) => { return inputValidator[item] === true }); if (allTrue) { buttonSend.disabled = false; } else { buttonSend.disabled = true; } }) }) <form action='index.html' id="form-user"> <input type="text" name="username" id="username" placeholder="username"> <input type="email" name="email" id="email" placeholder="email"> <input type="password" name="password" id="password" placeholder="password"> <button type="submit" name="submit" id='button-send' disabled>SUBMIT</button> </form>Probablemente esto no sea lo que está buscando, pero puede lograr casi el mismo efecto simplemente usando el atributo required en sus campos de entrada:
<form action='index.html' id="form-user"> <input type="text" name="username" id="username" placeholder="username" required> <input type="email" name="email" id="email" placeholder="email" required> <input type="password" name="password" id="password" placeholder="password" required> <button type="submit" name="submit" id='button-send' >SUBMIT</button> </form>El uso del evento onBlur garantizará que el usuario haya visitado cada campo. También puede verificar que el campo contenga un valor, para eso puede agregar el atributo HTML requerido.
var isDirty = { username: false, password: false, email: false } const init = function() { let incompleteItems = getIncompleteItems(); if(incompleteItems.length > 0) { alert(`${incompleteItems} requires a value.`); return; } let username = document.getElementById("username").value; let password = document.getElementById("password").value; let email = document.getElementById("email").value; alert(`values: ${username}, ${email}, ${password}`); }; const onChange = function(e) { isDirty[e.id] = true; } const getIncompleteItems = function() { let incomplete = ""; for (const [key, value] of Object.entries(isDirty)) { if(value === false) { if(incomplete.length > 0) { incomplete += `, ${key}`; } else { incomplete = key; } } } return incomplete; } <form method='GET' id="form-user" onsubmit="init()"> <input type="text" name="username" id="username" placeholder="username" onBlur="onChange(this)"> <input type="email" name="email" id="email" placeholder="email" onBlur="onChange(this)"> <input type="password" name="password" id="password" placeholder="password" onBlur="onChange(this)"> <button type="submit" name="submit" id='button-send'>SUBMIT</button> </form>