A Slightly Improved Password Field Template

I know my previous password field template was just about functional, so I have improved it slightly now you will have to enter the password twice in password mode and they will have to match. And in Read-Only mode it just displays ********** or as many ‘*’ as you like.

<asp:Literal runat="server" ID="Literal1" Text="**********" />

Listing 1 - Password.ascx page and the code behind is even less interesting.

<%@ Control 
    Language="C#" 
    CodeFile="Password_Edit.ascx.cs" 
    Inherits="Password_EditField" %>
    
<asp:TextBox 
    ID="TextBox1" 
    runat="server" 
    TextMode="Password" 
    CssClass="droplist">
</asp:TextBox>
<asp:CompareValidator 
    ID="CompareValidator1" 
    runat="server" 
    ControlToValidate="TextBox1" 
    ControlToCompare="TextBox2" 
    EnableClientScript="true"
    SetFocusOnError="True"
    Text="*" />
<asp:RequiredFieldValidator 
    runat="server" 
    ID="RequiredFieldValidator1" 
    CssClass="droplist"
    ControlToValidate="TextBox1" 
    Display="Dynamic" 
    Enabled="false" 
    Text="*" />
<asp:RegularExpressionValidator 
    runat="server" 
    ID="RegularExpressionValidator1" 
    CssClass="droplist"
    ControlToValidate="TextBox1" 
    Display="Dynamic" 
    Enabled="false" 
    Text="*" />
<asp:DynamicValidator 
    runat="server" 
    ID="DynamicValidator1" 
    CssClass="droplist" 
    ControlToValidate="TextBox1"
    Display="Dynamic" 
    Text="*" />
<br />
<asp:TextBox 
    ID="TextBox2" 
    runat="server" 
    TextMode="Password" 
    CssClass="droplist">
</asp:TextBox>

Listing 2 – Password_Edit.ascx

Figure 1 – Password field template.

From Listing 2 and Figure 1 you can see all I’ve done is add a CompareValidator and an extra TextBox to the page. I have configured the CompareValidators two properties to:

ControlToValidate="TextBox1" 
ControlToCompare="TextBox2"

and enabled client script via the EnableClientScript property.

using System;
using System.Collections.Specialized;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Password_EditField : System.Web.DynamicData.FieldTemplateUserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.MaxLength = Column.MaxLength;
        if (Column.MaxLength < 20)
            TextBox1.Columns = Column.MaxLength;
        TextBox1.ToolTip = Column.Description;

        CompareValidator1.ErrorMessage = "passwords must match";
        SetUpValidator(RequiredFieldValidator1);
        SetUpValidator(RegularExpressionValidator1);
        SetUpValidator(DynamicValidator1);
    }

    protected override void ExtractValues(IOrderedDictionary dictionary)
    {
        var original = dictionary[Column.Name];
        // make sure we have some text
        if (TextBox1.Text.Trim().Length > 0)
            dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
    }

    public override Control DataControl
    {
        get { return TextBox1; }
    }
}

Listing 3 – Password_Edit.ascx.cs

In Listing 3 we can see that I have set the ErrorMessage property to “passwords must match” as if we use the SetUpValidator it just disables the validator so this will require a little extra work if you want it localised. Also you will note the line:

protected override void ExtractValues(IOrderedDictionary dictionary)
{
    var original = dictionary[Column.Name];
    // make sure we have some text
    if (TextBox1.Text.Trim().Length > 0)
        dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
}

In the ExtractValues method that check to see if the TextBox is empty ‘if (TextBox1.Text.Trim().Length > 0)’ if it is empty we simply return no value which means the value stays the same.

The only issue is that if you add text to the second TextBox (without entering any text into the first) then validation fails in that no error is flagged, nut no values is saved, so in this case the password would remain the same. I have looked at this and am writing an extended CompareValidator to a) fix this inconsistency and b) give a server side validation event if required.

I wont bother with a download this time as you have all the code in Listings 2 & 3 and you have all you need for the Password.ascx in Listing 1.

Happy Coding