Recently I needed to disable some ASP.NET RequiredFieldValidator controls on one page depending on user input.
This is trivial you say. But the problem was that this needed to occur instantly on Client Side based on the state of one CheckBox control and not after a full page PostBack.
This is trivial you say. But the problem was that this needed to occur instantly on Client Side based on the state of one CheckBox control and not after a full page PostBack.
For example imagine you have TextBox control that needs to be filled by user only if one CheckBox control on the page is checked.
So normally, you would add RequiredFieldValidator to the page, wire it up with that TextBox control, and enable/disable this Validator on PageLoad event depending on the Checked state of the CheckBox.
So normally, you would add RequiredFieldValidator to the page, wire it up with that TextBox control, and enable/disable this Validator on PageLoad event depending on the Checked state of the CheckBox.
But let us consider this rare situation: User checks the CheckBox, without filling the TextBox and submits the page. On PageLoad the RequiredFieldValidator gets activated, and page is presented to the user again with validation error.
User changes his mind and makes Checkbox unchecked (he does not want to fill the TextBox) and tries to submit the form, but what happens?
Client Side validation of RequiredFieldValidator is triggered to enforce user to fill that TextBox and user cannot submit the page.
User changes his mind and makes Checkbox unchecked (he does not want to fill the TextBox) and tries to submit the form, but what happens?
Client Side validation of RequiredFieldValidator is triggered to enforce user to fill that TextBox and user cannot submit the page.
The only solution is to Enable/Disable the ASP.NET Validator controls on page with JavaScript code as soon as user changes the Checked state of the CheckBox control on the page.
After some digging I found out that ASP.NET Validator controls have Client Side API that supports some niffty features, so here is the list of supported Client Side functions:
| ValidatorEnable (val, enable) | Takes a client-validator and a Boolean value. Enables or disables a client validator. Being disabled will stop it from evaluating and it will always appear valid. |
| ValidatorHookupControl (control, val) | Takes an input HTML element and a client-validator. Modifies or creates the element's change event so that it updates the validator when changed. This can be useful for custom validators that depend on multiple input values. |
NOTE:
One thing is important to say here: Server Side Validation will occur after page PostBack even if you programmatically disable Client Side validation with Java Script.
This API just allows you to manipulate the Client Side state of your Validator controls, Disable or Enable them and therefore allow or forbid the user to submit the page, and all this does not affect how this Server Side Validators will behave on Server Side.
So how we use that API?
Let us set up a simple example project with two TextBox controls (Full Name and Email) with RequiredFieldValidators for both of them and RegularExpressionValidator for Email field and a CheckBox control that Enables/Disables the Client Side validation for all the Validator controls.
Here is how our ASPX page code looks like:
Let us set up a simple example project with two TextBox controls (Full Name and Email) with RequiredFieldValidators for both of them and RegularExpressionValidator for Email field and a CheckBox control that Enables/Disables the Client Side validation for all the Validator controls.
Here is how our ASPX page code looks like:
<body onload="InitValidators();">
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="enableValidatorsCheckBox" runat="server" Text="Validators Enabled - Click on this checkbox to Enable/Disable client side validation for ASP.NET Validator controls." Checked="true" onclick="ValidatorsEnabled(this.checked);" />
<br /><br />
<asp:Label ID="Label1" runat="server" Text="Full Name">asp:Label>
<asp:TextBox ID="Name" runat="server">asp:TextBox>
<asp:RequiredFieldValidator ID="NameRequiredFieldValidator" runat="server" ControlToValidate="Name"
ErrorMessage="Please enter your full name">asp:RequiredFieldValidator>
<br />
<asp:Label ID="Label2" runat="server" Text="Email">asp:Label>
<asp:TextBox ID="Email" runat="server">asp:TextBox>
<asp:RequiredFieldValidator ID="EmailRequiredFieldValidator" runat="server" ControlToValidate="Email"
ErrorMessage="Please enter your email address.">asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="EmailRegexValidator" runat="server" ControlToValidate="Email"
ErrorMessage="Invalid Email" ValidationExpression=".*@.{2,}\..{2,}">asp:RegularExpressionValidator>
<br /><br />
<asp:Button ID="SubmitButton" runat="server" Text="Submit" />
<br /><br />
<asp:Label ID="MessagesLabel" runat="server" Text="">asp:Label> <br />
<br />
<asp:ValidationSummary ID="ValidationSummaryControl" runat="server"
HeaderText="Validation Errors:" />
div>
form>
<script type="text/javascript" language="javascript">
function InitValidators()
{
// retrieve instance of our checkbox
var checkbox = document.getElementById('<%=enableValidatorsCheckBox.ClientID%>');
// enable/disable all validators on page based on checkbox state
ValidatorsEnabled(checkbox.checked);
}
function ValidatorsEnabled(state)
{
ValidatorEnable(document.getElementById('<%=NameRequiredFieldValidator.ClientID%>'), state);
ValidatorEnable(document.getElementById('<%=EmailRequiredFieldValidator.ClientID%>'), state);
ValidatorEnable(document.getElementById('<%=EmailRegexValidator.ClientID%>'), state);
}
script>
body>
| So as you can see from the code we have created a simple helper Java Script function ValidatorsEnabled(state) to enable/disable all validator controls on the page depending on the state parameter supplied. On each page load (using the body onload Client Side event) we call the InitValidators() function that just takes the Checked state of the CheckBox control and calls the ValidatorsEnabled with that value so that Client Side validation is enabled/disabled on page load. Also whenever user clicks on the CheckBox control (using the onclick Client Side event) we call the ValidatorsEnabled function also supplying the state of the CheckBox as state parameter to Enable/Disable Client Side validation. Note: we are using Server Side tags in our JavaScript code: '<%=NameRequiredFieldValidator.ClientID%>' to dynamically retrieve the Client Side names of our Server Side Validators so we don't have to hard code them, and therefore have to change them in Java Script code if we change their names on Server Side. And here is what happens at our code behind: protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack) { Page.Validate(); StringBuilder msg = new StringBuilder("Page Is Submitted. Validation State: "); if (Page.IsValid) { msg.AppendFormat("Valid. Submitted Name: {0} Submitted Email: {1}", Name.Text, Email.Text); } else { msg.Append("INVALID!"); } MessagesLabel.Text = msg.ToString(); } } Simple stuff here, we just trigger the page Validation if there is a PostBack and display status messages in the Label control depending on the validation status of the page/validation controls. So let us see what happens if we run the sample page? Initially Client Side validation is enabled for all our Validator controls and until we fill the required data we cannot submit the page:  If you try to submit this page Post Back will not occur because Client Side validation will get triggered. Here is the result, page is not submitted, instead an error message is displayed in each Validator control and in Validation Summary control on the bottom of the page:  Now, if you click on the CheckBox on top and uncheck it, the Client Side validation for all our Validator controls will be instantly disabled by calling our Java Script function ValidatorsEnabled(false) and all the validation errors will at once dissapear! You will be permitted to submit the page, even if you dont fill in the required information, full page PostBack will happen and on the Server Side validation will get triggered for each Validator control. Good side of this is that you can override the Validators behaviour on Client Side and allow the Post Back to occur and then decide on Server Side if you really want to disable some of the Validator Controls or display error messages, enforce custom business logic etc. Here is how the page looks after you have disabled Client Side validation and submitted it without filling all the required data: TIP: Always make sure you have a really good reason to do all this because generally Client Side validation is a good thing and should be enabled by default and used whenever possible because it saves bandwidth and forbids unnecessary postbacks. Control is now in your hands, so use it wisely :) |
You guys out there are performing a great job.
ReplyDeleteWeb Development
online pharmacy app development
ReplyDelete