CSS Example for AJAX Password strength as text

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 text message. To display the password strength indication text message TextIndicatorCssClass, TextStrengthDescriptionStyles or StrengthStyles CSS based properties are used to change the look and feel of strength indicator.

AJAX Control Toolkit Examples:

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

Here we will use TextStrengthDescriptionStyles property to display the password strength indication text message:

CSS Code for AJAX Password strength text

.textIndicator_poor, 
.textIndicator_weak, 
.textIndicator_good, 
.textIndicator_strong, 
.textIndicator_excellent {
    padding: 2px;
    font-weight: bold;
}

.textIndicator_poor {
    background-color: gray;
    color: #ffff00;
}

.textIndicator_weak {
    background-color: gray;
    color: #00ffff;
}

.textIndicator_good {
    background-color: gray;
    color: lightblue;
}

.textIndicator_strong {
    background-color: gray;
    color: lightgreen;
}

.textIndicator_excellent {
    background-color: gray;
    color: #00ffdd;
}


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

HTML Code for AJAX Password strength text

<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" Width="200px" ID="TextBox1" runat="server"></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="Text" 
    HelpHandlePosition="AboveLeft" 
    TextStrengthDescriptionStyles="textIndicator_poor; textIndicator_weak; textIndicator_good; textIndicator_strong; textIndicator_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 Text Description

Continue to next tutorial: AJAX PopupControl Extender to learn the AJAX functionality that popups a context menu associated to ASP.Net control.

6 Responses to "CSS Example for AJAX Password strength as text"
sathish
I do not download link for all these articles, please some one help me to do... Thanks advance...
aaron
my password strength didnt appeared!!! ><



<%@ Page Language="VB" AutoEventWireup="false" CodeFile="assa.aspx.vb" Inherits="assa" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head runat="server">
<title></title>

</head>
<body>


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

<asp:TextBox Width="200px" ID="TextBox1" runat="server"></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="Label3"
StrengthIndicatorType="Text"
HelpHandlePosition="AboveLeft"
TextStrengthDescriptionStyles="textIndicator_poor; textIndicator_weak; textIndicator_good; textIndicator_strong; textIndicator_excellent">
</ajaxToolkit:PasswordStrength>



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

</div>
</form>
</body>
</html>
Ezineasp.net
Hi Aaron Please use the CSS styles as mentioned in this tutorial to display the password strength indicator.
Aaron
i had use the css. but surprisingly nothing came out. i am new to ajax. must i add anything to my web.config? currently i am using NET3.5
Ezineasp.net
@Aaron Try to run your page in Internet Explorer and check if its showing any JavaScript error in the status bar.
cherry
thanx.....I like ur service..... it's really very helpful....
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email