How to call JavaScript function when ASP.Net validators succeed?

I have a webform with ASP.Net controls and Validators for them setup into a group. I am trying to execute some JavaScript that occurs only when the validators succeed, to prevent the user from going onto the next step of the form without completing the requirements.

However, I cannot seem to get this to work properly. The JavaScript either executes without validation completing, or the JavaScript won’t execute when validated successfully. I have a sneaking suspicion that this is due to the combination of HTML Required="true" tags, and ASP.Net validators behaving differently.

ASP.Net

<asp:TextBox ID="EmailAddress" runat="server" TextMode="Email" Required="true" ValidationGroup="Group1" />

<asp:TextBox ID="Password1" runat="server" TextMode="Password" Required="true" ValidationGroup="Group1" />
<asp:RegularExpressionValidator ID="valPassword" runat="server" ControlToValidate="Password1" 
    ErrorMessage="Your password doesn't meet the strength requirements" 
    ValidationExpression="^(?=.*d)(?=.*[a-z])(?=.*[/W_].*)(?=.*[A-Z]).{8,255}" 
    ValidationGroup="Group1" ></asp:RegularExpressionValidator>

<asp:TextBox ID="Password2" runat="server" TextMode="Password" Required="true" ValidationGroup="Group1" 
/>
<asp:CompareValidator runat="server" ControlToCompare="Password1" ControlToValidate="Password2"  
    ErrorMessage="Your entered passwords do not match." ValidationGroup="Group1" />

<asp:Button ID="btnNext" runat="server" Text=">" OnClientClick="pgNext();" ValidationGroup="Group1" />

JavaScript

function pgNext() {
    if (Page_ClientValidate("Group1")) {
        $('.register-page1').css('display', 'none');
        $('.register-page2').css('display', 'block');
    } else {

    }
}

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Call your page validator, then check if page is valid, then finally call your js function.
In your button click event:

 Page.Validate("validationGroupNameHere");

 if(Page.IsValid)
 {
   // click code here
   
  //then call your js function
  Page.RegisterStartupScript(Page, Page.GetType(), "callMe", " jsFunctionNameHere();", true);
 }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating