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

Question

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 {

    }
}

Why not use validation group instead? If the goal is to prevent an action when it is not yet valid to go to the next step? — tontonsevilla
– tontonsevilla, Commented Aug 18, 2020 at 11:46
@tontonsevilla I have a validation group in the code ValidationGroup="Group1" - is this what you mean? Thanks! — RazorKillBen
– RazorKillBen, Commented Aug 18, 2020 at 12:27
Thanks @VDWWD - do you mind expanding on how I would do so? Thank you — RazorKillBen
– RazorKillBen, Commented Aug 18, 2020 at 12:28
asp.net-tutorials.com/validation/custom-validator. It's very simple, just return e.IsValid = true; when all your own checks have completed. — VDWWD
– VDWWD, Commented Aug 18, 2020 at 12:32

JobesK · Accepted Answer · 2020-08-20 22:46:20Z

0

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);
 }

edited Aug 20, 2020 at 22:46

answered Aug 18, 2020 at 23:17

JobesK

3471 gold badge2 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related