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!!!
