Estaba tratando de validar mi formulario HTML con la ayuda de Javascript, pero los mensajes de error se muestran incluso después de proporcionar entradas válidas. Si agrego 'preventDefault()', los mensajes de error se muestran solo con entradas no válidas, pero el formulario se envía de todos modos. Mi código-
HTML
<form id="form" novalidate onsubmit="return validate()"> <label for="firstName">Enter your first name</label><br> <input type="text" id="firstName" name="firstName" required><br> <span role="alert" id="nameError" aria-hidden="true"> Please enter a valid name </span> <label for="lastName">Enter your last name here</label><br> <input type="text" id="lastName" name="lastName" required><br> <span role="alert" id="lastNameError" aria-hidden="true"> Please enter a valid name </span> /*other elements in the form */Javascript para mensajes de error
const firstNameField = document.getElementById("firstName"); const lastNameField = document.getElementById("lastName"); let valid = true; if (firstNameField.getAttribute(length)<3 || firstNameField.getAttribute(pattern)!="[A-Za-z+]" || lastNameField.getAttribute(length)<3 || lastNameField.getAttribute(pattern)!="[A-Za-z+]") { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute('aria-hidden', false); nameError.setAttribute('aria-invalid', true); const lastNameError = document.getElementById("lastNameError"); lastNameError.classList.add("visible"); lastNameField.classList.add("invalid"); lastNameError.setAttribute('aria-hidden', false); lastNameError.setAttribute('aria-invalid', true); valid = false; } return valid; }CSS para los mensajes de error
#nameError, #lastNameError{ display: none; font-size: 0.8em; color: red; } #nameError.visible, #lastNameError.visible{ display: block; } input.invalid { border-color: red; }Soy nuevo en Javascript, por lo que cualquier sugerencia sería útil para mí.
Además de preventDefault() , también agregue stopPropagation() para evitar que el evento de submit aparezca en el form y lo envíe.
Parece que le falta el paréntesis de cierre en su condición if.
También intente hacer un ejemplo ejecutable con un fragmento , esta descripción en stackoverflow debería ayudar
Puedes hacer algo como esto en js:
document.getElementById('form').addEventListener('submit', function(e) { e.preventDefault(); console.log('run validation here, return true or false to submit'); }