Hello,
Here's my scenario:
I have a simple contact form set up where the user can choose how they
wish to be contacted from a list of options presented in a Select box
(DropDownList). Depending on what they choose, a panel will be made
visible with more form fields relating to that option. So, e.g., if
they choose "email" then a panel with a text box for entering the email
address appears.
The issue is this: all visible fields on the form are required, so I
need the ability to turn validators on and off depending on which
option the user chooses. So in the example above, the email address
text box, once visible, needs to be validated. If the user changes
their mind and decides they don't want to be contacted at all, then I
need to turn off whatever validators are involved with the email boxes.
Due to bandwidth limitations for the user base of this app, I cannot
incur a postback in the onchange event of the dropdownlist.
My big problem is that this is a .NET 2.0 app using Master Pages, and
Master Pages seem to kill the ValidatorEnable() function. I've tried
this solution (and a couple of variants) in a page /without/ Master
Pages and it works fine. Showing and Hiding panels with java script
obviously is trivial, but ValidatorEnable only works for turning the
validators on, and not for turning them off. I have pasted in a
lightweight, sample version of my code below for reference. Anyone have
any ideas? I've encountered a couple of similar issues while searching
online, but none have been similar enough for their solutions to work
for me. Any help is greatly appreciated...
Best,
Dan
CODE:
<%@ Page Language="C#" EnableEventValidation="true"
MasterPageFile="~/App_Templates/SomeFolder/Main.master"
AutoEventWireup="true" CodeBehind="SendEmail.aspx.cs"
Inherits="My.Inheritance.Chain.SomeClass" Title="Send Email" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cntBody"
runat="server">
<script type="text/javascript">
function SwitchContactPanels(theValue){
switch(theValue){
case "Email":
document.getElementById("EmailInfo").style.display = "block";
ValidatorEnable(document.getElementById("ctl00_cnt Body_EmailRequired",
true));
ValidatorEnable(document.getElementById("ctl00_cnt Body_CompareEmails",
true));
break;
default:
ValidatorEnable(document.getElementById("ctl00_cnt Body_EmailRequired",
false));
ValidatorEnable(document.getElementById("ctl00_cnt Body_CompareEmails",
false));
document.getElementById("EmailInfo").style.display = "none";
break;
}
}
</script>
<asp:ValidationSummary ID="ErrorSummary" runat="server"
Font-Bold="True" HeaderText="There was a problem with your submission.
Please fix the following and try again:" />
<table id="SendEmailTable" summary="layout table only">
<tr><td class="blackText" colspan="2">Use the following form to submit
feeback. All fields are required.</td></tr>
<tr><td class="labelCell"><label for="Category">Select a
category:</label></td><td class="fieldCell"><asp:DropDownList
runat="server" ID="Category">
<asp:ListItem Value="-1">--Select--</asp:ListItem>
<asp:ListItem>Fake Category 1</asp:ListItem>
<asp:ListItem>Fake Category 2</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="CategoryRequired" runat="server"
ControlToValidate="Category"
Display="Dynamic" ErrorMessage="Select a category."
InitialValue="-1">*</asp:RequiredFieldValidator></td></tr>
<tr><td class="labelCell"><label for="Contact">How may we contact
you?</label></td><td class="fieldCell">
<select runat="server" id="HowToContact"
onchange="SwitchContactPanels(this.value)">
<option value="-1">--Select--</option>
<option>Email</option>
<option>Phone</option>
<option value="Other">Other (specify in message)</option>
<option>Do not contact me</option>
</select>
<asp:RequiredFieldValidator ID="ContactRequired" runat="server"
ControlToValidate="HowToContact"
Display="Dynamic" ErrorMessage="Select a method by which we may
contact you."
InitialValue="-1">*</asp:RequiredFieldValidator></td></tr>
<!--this next row contains the hidden panels to be displayed based on
the "how may we contact you" dropdownlist-->
<tr><td colspan="2">
<div id="EmailInfo" style="display:none;">
<fieldset>
<table>
<tr><td class="labelCell"><label for="EmailAddress">Email
Address:</label></td><td class="fieldCell"><asp:TextBox runat="server"
ID="EmailAddress"></asp:TextBox>
<asp:RequiredFieldValidator ID="EmailRequired" runat="server"
ControlToValidate="EmailAddress"
Display="Dynamic" ErrorMessage="Enter your email address."
Enabled="False">*</asp:RequiredFieldValidator></td></tr>
<tr><td class="labelCell"><label for="ConfirmEmail">Confirm
Email:</label></td><td class="fieldCell"><asp:TextBox runat="server"
ID="ConfirmEmail"></asp:TextBox>
<asp:CompareValidator ID="CompareEmails" runat="server"
ControlToCompare="EmailAddress"
ControlToValidate="ConfirmEmail" Enabled="False"
ErrorMessage="Email addresses must match"
Display="Dynamic">*</asp:CompareValidator></td></tr>
</table>
</fieldset>
</div>
</td></tr>
<tr><td colspan="2" class="blackText"><label
for="Message">Message:<asp:RequiredFieldValidator ID="MessageRequired"
runat="server" ControlToValidate="MessageBody"
Display="Dynamic" ErrorMessage="Type a
message.">*</asp:RequiredFieldValidator></label><br /><textarea
cols="65" rows="6" id="MessageBody"
runat="server"></textarea></td></tr>
<tr><td class="labelCell"><asp:Button runat="server" ID="DoSendEmail"
Text="Submit" OnClick="DoSendEmail_Click" /></td><td
class="fieldCell"><button type="reset">Reset</button></td></tr>
</table>
</asp:Content>
