CSS Example for AJAX Password strength as bar meter

Updated on 19 Apr 2012,
Published on 15 Sep 2008

You can use the following set of CSS class styles to customize the look and feel of ASP.Net AJAX password strength as bar indicator meter. To display the password strength indication meter BarBorderCssClass, BarIndicatorCssClass or StrengthStyles CSS based properties are used to change the look and feel of strength indicator. Here we will use BarBorderCssClass and StrengthStyles properties to display the password strength indication meter:

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

CSS Code for AJAX Password strength meter

.barIndicatorBorder {
    border: solid 1px #c0c0c0;
    width: 200px;
}

.barIndicator_poor {
    background-color: gray;
}

.barIndicator_weak {
    background-color: cyan;
}

.barIndicator_good {
    background-color: lightblue;
}

.barIndicator_strong {
    background-color: blue;
}

.barIndicator_excellent {
    background-color: navy;
}

.textbox {
    border: solid 2px #cccccc;
    border-top: solid 2px #a0a0a0;
}

HTML Code for AJAX Password strength meter

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
    
<asp:Label ID="Label2" 
    runat="server" 
    Font-Bold="true" 
    Font-Size="14px" 
    Text="Enter Password: ">
</asp:Label>

<asp:TextBox CssClass="textbox" 
    ID="TextBox1" 
    runat="server" 
    Width="200">
</asp:TextBox>

<ajaxToolkit:PasswordStrength runat="server" ID="PasswordStrength1"
    TargetControlID="TextBox1"
    DisplayPosition="RightSide"
    MinimumSymbolCharacters="1"
    MinimumUpperCaseCharacters="1"
    PreferredPasswordLength="10"
    CalculationWeightings="25;25;15;35"
    RequiresUpperAndLowerCaseCharacters="true"
    TextStrengthDescriptions="Poor; Weak; Good; Strong; Excellent"
    HelpStatusLabelID="Label1"
    StrengthIndicatorType="BarIndicator"
    HelpHandlePosition="AboveLeft"
    BarBorderCssClass="barIndicatorBorder"
    StrengthStyles="barIndicator_poor; barIndicator_weak; barIndicator_good; barIndicator_strong; barIndicator_excellent">
</ajaxToolkit:PasswordStrength>

<div class="clear"><br /></div>

<asp:Label ID="Label1" runat="server"></asp:Label>

Output:

You can see the output of above discussed code from the following link:

AJAX PasswordStrength Control using Bar Meter

Continue to next tutorial: CSS Example for AJAX Password strength as text to learn how to display the text indication as a password strength indicator.

4 Responses to "CSS Example for AJAX Password strength as bar meter"
Anarul Rahaman
I use the ajax toolkit version 1.0.61025.0 but the property of PasswordStrength StrengthStyles is not there so I cant use the different style for strength-bar.
Puneet Malviya
Hi.......
ThaX for this nice code


ThanX
abdullaziz
can you plz upload the solution cuze i don't have the ajax control
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email