Considere el siguiente código:
$("button[type='submit']").click(function(e){ if($(this).closest("form").checkValidity()) { $(this).closest("form").reportValidity(); } e.preventDefault(); alert("Never happens!!!"); }); Si los datos de entrada son válidos y luego presiono el botón Enviar, el formulario php se envía sin dejar que e.preventDefault(); y alert("Never happens!!!"); para ser ejecutado. Sospecho que esto sucede porque checkValidity y reportValidity devuelven true , que actúa como return true; declaración.
Considere este código:
$("button[type='submit']").click(function(e){ e.preventDefault(); alert("Does happen!!!"); }); Esta vez veo la alerta, lo que significa que preventDefault detuvo el envío del formulario. Lo que es extraño para mí, incluso si checkValidity y reportValidity devuelven true , ¿cómo pueden actuar como declaración de devolución para la función de clic de jquery?
Cabe señalar que el siguiente enfoque tampoco funciona:
$("button[type='submit']").click(function(e){ e.preventDefault(); if($(this).closest("form").checkValidity()) { $(this).closest("form").reportValidity(); } alert("Never happens!!!"); }); Creo que preventDefault evita que checkValidity y reportValidity funcionen correctamente y los obliga a devolver false , que de alguna manera actúa como return false; declaración que hace que la alert no se ejecute.
Otra posible explicación podría ser que llamar a checkValidity o reportValidity haga que se envíe el formulario. No sé por qué sería ese el caso.
Dé una explicación con referencia a la documentación oficial.
checkValidity() y reportValidity() no son métodos de un objeto jQuery. En su lugar, debe llamarlos en el objeto de elemento de form subyacente.
También parece por el contexto que la lógica en la condición if debe invertirse para que se llame a reportValidity() solo cuando el formulario no sea válido , junto con e.preventDefault() para detener el envío del formulario real.
$("button[type='submit']").click(function(e) { let form = $(this).closest('form').get(0); if (!form.checkValidity()) { form.reportValidity(); e.preventDefault(); } console.log("Will always happen"); }); <form> <input type="text" name="foo" value="" required /> <button type="submit">Submit</button> </form> Dicho esto, su código JS es completamente redundante ya que obtiene este comportamiento exacto de forma gratuita cuando aplica el atributo required a cualquier control dentro del formulario:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" name="foo" value="" required /> <button type="submit">Submit</button> </form>