Add validation function to ASP.NET AJAX Tab control

Overview

In my previous post, I talked about how to make AJAX Tab control panel to load on-demand. Now I would like to extend that sample and implement validation function to each tab, so that user cannot change tab if the information they enter is not valid.

I am going to use the out-of-the-box ASP.NET Validator to do the validation, as they provide many useful client-side properties and methods:

• Page_IsValid - By MSDN it indicates whether the page is currently valid and it is kept up to date at ALL TIMES. it is not very true though... because it need time to update.
• Page_Validators - An array containing all of the validators on page.
• Page_ValidationActive - Indicates whether validation should take place, can be turned off at run time.
• ValidatorValidate(val) - Takes a validator as input and make the validator start validation on its target.
• isvalid - Very useful property of a validator, it shows that whether a particular validator's state is valid.

For other properties or functions related to validators, please refer to Reference section.

Reference

ASP.NET Validation in Depth

Validator Control Samples

Steps

Modify the AJAX Tab Container in previous example

I will build on the example code in my previous post, here is the modified Tab Container (For "TabPanel1" only):

Code Snippet:

<ajaxToolKit:TabPanel runat="server" ID="TabPanel1">

 

    <ContentTemplate>

        <asp:TextBox ID="TextBox1" runat="server" />

        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="Please enter something!" />

    </ContentTemplate>

 

</ajaxToolKit:TabPanel>

The only thing that I've added is the "RequiredFieldValidator", which will ensure that "TextBox1" has something entered, otherwise displaying the error message "Please enter something!"

 

Modify the Javascript function "ActiveTabChanged()"

Next and the final thing to do is to modify the "ActiveTabChanged()" function to do validation on Tab changed and return to previous Tab if the input is invalid.

Code Snippet:

<script type="text/javascript">

 

        var preActiveTabIndex = 0;

 

        function ActiveTabChanged(sender, e)

        {

            if (sender.get_activeTabIndex() != preActiveTabIndex) // This line is important, otherwise: Infinite Loop!!!

            {

                var valid = true;

 

                // Validate current tab before switching tab

                switch(preActiveTabIndex)

                {

                    case 0:

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

                        valid = $get('<%=RequiredFieldValidator1.ClientID%>').isvalid;

                        break;

                }

 

                if (!valid)

                {

                    // Invalid, return to previous tab

                    sender.set_activeTabIndex(preActiveTabIndex);

                }

                else

                {

                    // Change Tab

                    preActiveTabIndex = sender.get_activeTabIndex();

 

                    switch(sender.get_activeTabIndex())

                    {

                        case 1:

                            // Reload "UpdatePanel1"

                            __doPostBack('<%=UpdatePanel1.ClientID%>','');

                            break;

                    }

                }

            }

        }

 

    </script>

As the "TabContainer" object don't store previous active tab index, we have to store it with a variable "preActiveTabIndex".

So the algorithm is to validate the Tab based on "preActiveTabIndex". If the result is valid, then go ahead and change tab, otherwise force the Tab Container to previous tab.

Done!!!