He visto muchas soluciones y preguntas similares a esta, pero ninguna me ayudó.
aquí hay un formulario html simple con validación de JavaScript
mensaje de error de registro en la tecla arriba cuando el valor de los campos de entrada es menor que la longitud requerida (menos de 5)
mensaje de error de registro al enviar cuando los campos de entrada están vacíos (nombre y apellido)
el problema es cuando hago clic en el botón Enviar, el formulario se envía independientemente de los errores
preventDefault() y return false pero ninguno de ellos funcionó
¿Cómo puedo mejorar el código para que funcionen correctamente? tanto para activar como para enviar
let fname = document.getElementById('fname'); let lname = document.getElementById('lname'); form = document.querySelector('#myForm'); function checkFirstName() { let valid = true; if (fname.value.length < 5) { console.log('first name must be greater than 5'); valid = false; } } function checkLastName() { let valid = true; if (lname.value.length < 5) { console.log('last name must be greater than 5'); valid = false; } } form.addEventListener('input', function(e) { switch (e.target.id) { case 'fname': checkFirstName(); break; case 'lname': checkLastName(); break; } }); form.addEventListener('submit', function(e) { let isFormField = true; if (fname.value === '') { console.log('first name is required') isFormField = false; } if (lname.value === '') { console.log('last name is required') isFormField = false; } if (!isFormField) { e.preventDefault(); return } }); <form method="get" id="myForm"> <div> <input type="text" class="form-control" id="fname" name="fname"></br> <small class="small" id="small"></small> </div> <div> <input type="text" class="form-control" id="lname" name="lname"></br> <small class="small" id="small"></small> </div> <button type="submit" name="send">submit</button> </form>He movido toda la validación de firstname en la función checkFirstName y lastname en checkLastName . solo para ser conciso
Puede hacerlo por separado, pero debe recordar que el formulario solo se enviará si checkFirstName y checkLastName devuelven verdadero
let fname = document.getElementById('fname'); let lname = document.getElementById('lname'); form = document.querySelector('#myForm'); function checkFirstName() { if (fname.value.length >= 5) return true; if (fname.value === "") { console.log('Last name is required') return false } console.log('first name must be greater than 5'); return false; } function checkLastName() { if (lname.value.length >= 5) return true; if (lname.value === "") { console.log('Last name is required') return false } console.log('last name must be greater than 5'); return false; } form.addEventListener('input', function(e) { switch (e.target.id) { case 'fname': checkFirstName(); break; case 'lname': checkLastName(); break; } }); form.addEventListener('submit', function(e) { if (!checkFirstName() || !checkLastName()) { e.preventDefault(); return } }); <form method="get" id="myForm"> <div> <input type="text" class="form-control" id="fname" name="fname"></br> <small class="small" id="small"></small> </div> <div> <input type="text" class="form-control" id="lname" name="lname"></br> <small class="small" id="small"></small> </div> <button type="submit" name="send">submit</button> </form>