Estoy tratando de obtener un evento jQuery para que solo se active una vez que el formulario sea válido, sin usar ninguna extensión. Por ejemplo, tengo un campo de correo electrónico:
<input type="email" class="form-control" id="email" placeholder="info@example.com" aria-describedby="emailHelp" name="email" maxlength="250" required>Dentro de un Formulario. Una vez que se hace clic en el botón Enviar, se activa este evento:
$("#submitForm").click(function() { $("#spinnerSubmit").removeAttr('hidden'); });Pero si el usuario no ingresa un correo electrónico correcto en el formato correcto, el evento se activa pero el formulario aún espera una entrada de correo electrónico. ¿Puedo verificar de alguna manera si el formulario está validado en el lado del navegador, sin usar extensiones excesivas? ¿O mi única opción es esta ?
La mayoría de las respuestas existentes, especialmente las etiquetadas con jquery , lo llevarán a la validación de jquery.
HTML5 incluye alguna forma de validación, consulte: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process
En resumen (de esa página), puede llamar a checkValidity en un elemento o formulario DOM, por ejemplo:
document.getElementById("myForm").checkValidity();Aquí hay un ejemplo (jquery solo se usa para eventos/IU):
$("#submitForm").click(function() { var isValid = document.getElementById("myForm").checkValidity(); $("p").text(isValid); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myForm"> <input type="email" class="form-control" id="email" placeholder="info@example.com" aria-describedby="emailHelp" name="email" maxlength="250" required> </form> <button type='button' id='submitForm'>click me</button> <p>waiting for click</p> También podría usar $("#myForm")[0].checkValidity() pero lo dejó fuera del ejemplo para evitar confusiones sobre jquery/DOM y [0] o use vanilla para las actualizaciones de la interfaz de usuario.