ASP.NET 2.0 – C#

The Problem: Various drop down lists are turned on and off (visible/hidden) depending on the value of other controls, most likely another ddl. This is usually fine, however, each conditional control has an ASP required field validator attached to them. If you just simply hide the control, the validator is still active. Uh oh.

The Answer: jQuery

• We don’t want to use server side validation, that would just cause a post back. No one wants one of those.
• We want the validation to happen all at once to all controls, not go though JavaScript validation that prevents your ASP validators from doing their job.

If you have conditional controls (like drop down lists) and want to put ASP validation on them, you want to do it in a way that doesn’t call a post back. The best way to do that is to use jQuery and some JavaScript so all of your validation stays client side.

For this example we have a Country drop down list that controls whether or not a state drop down list is shown. We want to put a required validation on the state drop down, but we do not want to validate the other controls that are not shown.

The form:

<form id="coolstuff" runat="server">
 <div id="form-style">
 <label>Country</label>
 <asp:DropDownList ID="ddlCountryList" runat="server"
DataTextField="CountryDesc"
DataValueField="CountryCode">
<asp:ListItem Selected="True" Text="United States" Value="US"></asp:ListItem>
<asp:ListItem Text="Canada" Value="CA"></asp:ListItem>
<asp:ListItem Text="China" Value=""></asp:ListItem>
 </asp:DropDownList>
 <br />

<label>State</label>
 <asp:DropDownList ID="ddlUS" runat="server">
<asp:ListItem Selected="True" Text="Select State" Value=""></asp:ListItem>
<asp:ListItem Text="California" Value="CA"></asp:ListItem>
<asp:ListItem Text="New York" Value="NY"></asp:ListItem>
<asp:ListItem Text="Texas" Value="TX"></asp:ListItem>
 </asp:DropDownList>
 <asp:RequiredFieldValidator id="valUS" runat="server"
ControlToValidate="ddlUS"
Display="Dynamic"
ErrorMessage="State is a required field."
ForeColor="Red">
 </asp:RequiredFieldValidator>

<asp:DropDownList id="ddlCanada" runat="server">
<asp:ListItem Selected="True" Text="Select Providence" Value=""></asp:ListItem>
<asp:ListItem Text="Alberta" Value="AB"></asp:ListItem>
<asp:ListItem Text="Ontario" Value="ON"></asp:ListItem>
<asp:ListItem Text="Quebec" Value="QC"></asp:ListItem>
 </asp:DropDownList>
 <asp:RequiredFieldValidator id="valCanada" runat="server"
ControlToValidate="ddlCanada"
Display="Dynamic"
ErrorMessage="Providence is a required field."
ForeColor="Red">
 </asp:RequiredFieldValidator>

<asp:Label ID="lblStateNA" runat="server" Text="N/A" />
 <br />

<asp:Button id="btnSubmit" OnClick="submitBtn_Click" runat="server" Text="Validate Me!" />

 </div><!-- end #form-style -->
 </form>

Here is the JavaScript

$(document).ready(function () {
//changes the ddl depending on the selected Country
$("#<%=ddlCountryList.ClientID %>").change(function () { getDropDown(); });
startIt();
});

//set variables for the validators
 var valProv = document.getElementById('<%= reqCanada.ClientID %>');
 var valState = document.getElementById('<%= reqUS.ClientID %>');

//if we simply use getDropDown() in the jQuery document ready function, it will
//automatically show the validation alert on first page load, so we set up a custom
//initial function
function startIt() {
//initial setup
$("#<%=lblStateNA.ClientID %>").hide();
$("#<%=ddlCanada.ClientID %>").hide();
$("#<%=ddlUS.ClientID %>").show();
//turns off province validator
ValidatorEnable(document.getElementById('<%= valCanada.ClientID %>'), false);
}

function getDropDown() {
//reset all the conditional controls to hidden (this doesn't disable the validation)
$("#<%=lblStateNA.ClientID %>").hide();
$("#<%=ddlCanada.ClientID %>").hide();
$("#<%=ddlUS.ClientID %>").hide();


//if US is selected, turn on States and it's validator, turn off province validator
 if ($("#<%=ddlCountryList.ClientID %>").val() == "US") {
 reqUS.enabled = true;
 ValidatorEnable(reqCanada, false);
 $("#<%=ddlUS.ClientID %>").show();
 }
 //if Canada is selected, turn on province and it's validator, turn off state validator
 if ($("#<%=ddlCountryList.ClientID %>").val() == "Canada" || $("#<%=ddlCountryList.ClientID %>").val() == "CA") {
 reqCanada.enabled = true;
 ValidatorEnable(reqUS, false);
 $("#<%=ddlCanada.ClientID %>").show();
 }
 //if it's neither US or Canada, turn off both validators, show "N/A"
 if ($("#<%=ddlCountryList.ClientID %>").val() != "Canada" && $("#<%=ddlCountryList.ClientID %>").val() != "US") {
 ValidatorEnable(valUS, false);
 ValidatorEnable(valCanada, false);
 $("#<%=lblStateNA.ClientID %>").show();
 }


}

And here is the codebehind:

public partial class _default : System.Web.UI.Page
 {
public void submitBtn_Click(object sender, EventArgs e)
{

}

protected void Page_Load(object sender, EventArgs e)
{

}
}