CreateUserWizard, FindControl, and Javascript ClientID trouble

eddiemcham · July 14th, 2009, 07:08 PM

Hello, it's me again.

Added a new text field to my New User screen that asks the user to type his/her email address a 2nd time to prevent typos when they sign up.

Basically how it's supposed to work is:

Enter your email in the Email field.
Enter your email again in the Confirm Email field.
As soon as your cursor leaves the Confirm Email field, a JS called confirmEmails(source, args) is supposed to check that Email and Confirm Email fields match. This is only if Email is not blank ~ we have to allow users without email addresses, so RequiredFieldValidators cannot help here.
If Email has something in it, check that it's a valid email address (using RegExpValidator) and that Confirm Email equals Email.
For those w/o JS, there is a server validation function (C#) that's supposed to do exactly as Step 4.

The client-side JS works fine if both fields are populated and do not match.

If Email is populated and Confirm Email is left blank, neither client nor server validation kick in. This is bad.

Again, I cannot use RequiredFieldValidators because it is possible that Email might not be supplied at all.

Below is my code.....thanks in advance! ~ Eddie

ASPX

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" ContinueDestinationPageUrl="~/UserInfo/Profile.aspx" DuplicateUserNameErrorMessage="Please enter a different user ID." UserNameLabelText="User ID:" UserNameRequiredErrorMessage="User ID is required." CancelDestinationPageUrl="~/SignUp.aspx" DisplayCancelButton="True">

<MailDefinition BodyFileName="~/App_Data/SignUpConfirmation.txt" Subject="Your new account at Heartland National TB Center website"></MailDefinition>

<WizardSteps>

<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
<ContentTemplate>
<div class="topbottompadding">Please complete the following fields.</div>
<table>
<tr>
<td class="right">
<span class="bold">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User ID:</asp:Label>
</span>
</td>

<td>
<asp:TextBox ID="UserName" runat="server" Width="150" TabIndex="1"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="  required" ForeColor="" CssClass="boldred" ToolTip="User ID is required." ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>
</td>
</tr>

<tr>
<td class="right">
<span class="bold">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
</span>
</td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password" Width="150" TabIndex="2"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="  required" ForeColor="" CssClass="boldred" ToolTip="Password is required." ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>
</td>
</tr>

<tr>
<td class="right">
<span class="bold">
<asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label>
</span>
</td>

<td>
<asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password" Width="150" TabIndex="3"></asp:TextBox>
<asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword" ErrorMessage="  required" ForeColor="" CssClass="boldred" ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>
</td>
</tr>

<tr>
<td class="right">
<span class="bold">
<asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">E-mail:</asp:Label>
</span>
</td>

<td>
<asp:TextBox ID="Email" runat="server" Width="200" TabIndex="4"></asp:TextBox>
<span class="boldred">*</span>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="Email" CssClass="boldred" Display="Dynamic" ErrorMessage="&nbsp;&nbsp;Invalid E-mail address" ForeColor="" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>

<tr>
<td class="right">
<span class="bold">
<asp:Label ID="Label1" runat="server" Text="Confirm E-mail:"></asp:Label>
</span>
</td>

<td>
<asp:TextBox ID="confirmEmailAddress" runat="server" Width="200px" TabIndex="5"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="confirmEmailAddress" CssClass="boldred" Display="Dynamic" ErrorMessage="&nbsp;&nbsp;Retype e-mail address" ForeColor="" ClientValidationFunction="confirmEmails" onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
</td>
</tr>

<tr>
<td class="right">
<span class="bold">
<asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question">Security Question:</asp:Label>
</span>
</td>

<td>
<asp:TextBox ID="Question" runat="server" TabIndex="6" Width="300"></asp:TextBox>
<asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question" CssClass="boldred" ErrorMessage="  required" ForeColor="" ToolTip="Security question is required." ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>
</td>
</tr>

<tr>
<td class="right">
<span class="bold">
<asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Security Answer:</asp:Label>
</span>
</td>

<td>
<asp:TextBox ID="Answer" runat="server" Width="300" TabIndex="7"></asp:TextBox>
<asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer" ErrorMessage="  required" ForeColor="" CssClass="boldred" ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>
</td>
</tr>

</table>

<div class="loginerrormsg">
<strong>*</strong> In order to serve you better, <strong>E-mail</strong> is strongly recommended.
</div>
<div class="topbottompadding">
<asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match." ValidationGroup="CreateUserWizard1" CssClass="boldred" ForeColor=""></asp:CompareValidator>
</div>
<div class="topbottompadding">
<span class="boldred">
<asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
</span>
</div>

</ContentTemplate>

</asp:CreateUserWizardStep>

<asp:CompleteWizardStep ID="CreateUserWizardStep2" runat="server">
<ContentTemplate>
<div class="topbottompadding">
<span class="boldred">Your account has been successfully created.</span>
</div>
<div class="topbottompadding">
<asp:Button ID="ContinueButton" runat="server" CausesValidation="False" CommandName="Continue" Text="Continue" ValidationGroup="CreateUserWizard1" CssClass="button" TabIndex="7"/>
</div>
</ContentTemplate>

</asp:CompleteWizardStep>

</WizardSteps>

</asp:CreateUserWizard>

Client-Side Javascript

<script type="text/javascript">

function confirmEmails(source, args) {
var email1 = document.getElementById('<%=CreateUserWizard1.CreateUserStep.ContentTempla teContainer.FindControl("Email").ClientID %>');
var email2 = document.getElementById('<%=CreateUserWizard1.CreateUserStep.ContentTempla teContainer.FindControl("confirmEmailAddress").Cli entID %>');
var strEmail1 = email1.value.toLowerCase();
var strEmail2 = email2.value.toLowerCase();
if (strEmail1 != "" && strEmail1 != null && strEmail1 == strEmail2) {
args.IsValid =
true;
} else {
args.IsValid =
false;
}
}

</script>

C#

protectedvoid CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)

{

TextBox email1 = (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateC ontainer.FindControl("Email");

TextBox email2 = (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateC ontainer.FindControl("confirmEmailAddress");

string txtEmail1 = email1.Text.ToLower();

string txtEmail2 = email2.Text.ToLower();

if (txtEmail1 == txtEmail2 && !String.IsNullOrEmpty(txtEmail1))

{
args.IsValid =
true;
}

else

{
args.IsValid =
false;
}

}

NOTE: After 2 attempts at formatting this code properly, it still puts extra spaces in the word "ContentTemplateContainer." Why it does this, I don't know. My actual code does not have these spaces, so please ignore them.