Estoy llamando a un evento de clic de botón DOM de JavaScript para ejecutar algún código. Sin embargo, primero necesito validar si un cuadro de texto tiene un valor. Entonces, estoy usando el control RequiredFieldValidator de ASP.NET para validar el cuadro de texto. Funciona en el sentido de que mostrará un mensaje de error cuando el cuadro de texto esté vacío; sin embargo, el evento de clic del botón de JavaScript asociado aún se activa.
¿Cómo evito que se active la función de JavaScript cuando uso un control de validación de ASP.NET?
Por cierto, sé que puedo usar la validación dentro de JavaScript, pero espero no hacerlo y solo usar los controles de validación de ASP.NET.
Aquí está mi código (es exactamente cómo se usa con toda la pelusa eliminada):
<%@ Page Language="VB" blah... %> <!DOCTYPE html> <html lang="en"> <head runat="server"> </head> <body> <form id="form1" runat="server"> <asp:Button ID="MyButton" runat="server" Text="Click Me" /> <asp:TextBox runat="server" ID="MyTextBox"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ID="MyRequiredFieldValidator" ControlToValidate="MyTextBox" Display="Dynamic" Text="*" ErrorMessage="The field is required."> Required </asp:RequiredFieldValidator> </form> <script type="text/javascript"> $(document).ready(function () { const vMYBUTTON = document.querySelector('#MyButton'); SomeKindOfPluginObject.dom.addEvent(vMYBUTTON, 'click', function () { console.log('Function started.'); console.log('My code executed.'); console.log('Function ended.'); event.preventDefault(); }); }); </script> </body> </html>El problema es que el envío del formulario es un evento de clic, que es independiente del evento de clic del botón.
Ambos eventos ingresan a la cola uno después del otro.
Cuando se envía el formulario, el servidor devuelve el error de campo requerido, luego se procesa el siguiente evento de clic, que resulta ser el JavaScript que no desea que se llame.
El servidor deberá mostrar una página sin el script hasta que no haya errores.
<!DOCTYPE html> <html lang="en"> <head runat="server"></head> <body> <!-- ///////////////////////////////////////////////////////////// // Both the button click, and the JavaScript click events are // triggerd when the form returns an error ///////////////////////////////////////////////////////////////--> <form id="form1" runat="server"> <!-- ///////////////////////////////////////////////////////////// // When this button is clicked, it fires its own click event ///////////////////////////////////////////////////////////////--> <asp:Button ID="MyButton" runat="server" Text="Click Me" /> <asp:TextBox runat="server" ID="MyTextBox"></asp:TextBox> <asp:RequiredFieldValidator runat="server" ID="MyRequiredFieldValidator" ControlToValidate="MyTextBox" Display="Dynamic" Text="*" ErrorMessage="The field is required."> Required </asp:RequiredFieldValidator> </form> <script type="text/javascript"> $(document).ready(function() { const vMYBUTTON = document.querySelector('#MyButton'); ///////////////////////////////////////////////////////////// // This event will fire because it is an // additional click event that you are adding ///////////////////////////////////////////////////////////// SomeKindOfPluginObject.dom.addEvent(vMYBUTTON, 'click', function() { console.log('Function started.'); console.log('My code executed.'); console.log('Function ended.'); event.preventDefault(); }); }); </script> </body> </html>Podría hacer algo simple para controlar el comportamiento agregando una variable para rastrear el estado del formulario.
/////////////////////////////////////////////////////////////// // This event will be ignored until the server returns success /////////////////////////////////////////////////////////////// SomeKindOfPluginObject.dom.addEvent(vMYBUTTON, 'click', function() { if (someVariableSetOnTheServer == "invalid form") { return; } console.log('Function started.'); console.log('My code executed.'); console.log('Function ended.'); event.preventDefault(); }); Otro método sería usar la API JavaScript de .NET para ejecutar el código solo cuando Page_ClientValidate() devuelve true
if (Page_ClientValidate()) { // run your code here }