ASP.NET Imagebutton在ValidationGroup验证后执行jQuery功能

Question

I have an issue with using both ASP.NET and jQuery in my webform.

Currently I have a multi-div registration that uses the ASP.NET clientside validation but I also want it to have jQuery animation to move from step to step.

<asp:ImageButton ID="NextButton" runat="server" ImageUrl="images/registration/arrowright.png" Height="50px" onmouseover="this.src='images/registration/arrowrightgreen.png'"  onmouseout="this.src='images/registration/arrowright.png'" ValidationGroup="UserInformation" OnClientClick="onNextClick()"/>

I also have a jQuery function that moves to the next step of the registration.

<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=pick_user_type]").hide();
    });

    function onNextClick() {
        $("[id$=registration_div]").hide('slide', { direction: 'left' }, 1000);
        $("[id$=pick_user_type]").show('slide', { direction: 'right' }, 1000);
    }
</script>

The issue is that jQuery will go ahead and do the animation even if the form is invalid. Is there anyway that I can communicate to jQuery otherwise? From what I have read, ASP.NET validators will cause the Page.Validate() method to returns false if you have an invalidated field. Am I going to have to just move to jQuery validation?

Answer 1

Well, looks like I just found out an answer. This will work on the ValidationGroup "UserInformation"

if (Page_ClientValidate("UserInformation")) {
    $("[id$=registration_div]").hide('slide', { direction: 'left' }, 1000);
    $("[id$=pick_user_type]").show('slide', { direction: 'right' }, 1000);
}

Answer 2

You can force the validation of a control and the update of its display, like this:

ValidatorValidate($('<%= myValidator.ClientID %>'));

Read ASP.NET Validation in Depth for more information about the client-side API and client-side objects.

Answer 3

use valid() function.

if($("#form_id").valid()) 
{
  $("[id$=registration_div]").hide('slide', { direction: 'left' }, 1000);
  $("[id$=pick_user_type]").show('slide', { direction: 'right' }, 1000);
}