Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Input > Extending Password Strength Checker with RadRating

• Barbaros Saglamtimur

  Posted on Jul 14, 2011 (permalink)

  Requirements
  RadControls version	2011 Q2
  .NET version	3.5 and 4.0
  Visual Studio version	2010
  programming language	JavaScript
  browser support	all browsers supported by RadControls

  
  PROJECT DESCRIPTION
  When I first see Password Strength Checker functionality I decide to add some visual richness. Here is how I implement this with help of RadRating.
  

  <script type="text/javascript">

      function updateRating(sender, args) {

          var calculatedScore = args.get_strengthScore();

          var radRating = $find("<%=RadRating1.ClientID %>");

          if (radRating != null) {

              var ratingItemCount = radRating._itemCount;

              var theValue = calculatedScore / (100 / ratingItemCount);

              radRating.set_value(theValue);

          }

      }

  </script>

  <telerik:RadTextBox ID="PasswordInput1" Width="250px" runat="server" Label="Enter password:"

      TextMode="Password">

      <PasswordStrengthSettings ShowIndicator="true" OnClientPasswordStrengthCalculating="updateRating"

          IndicatorElementID="dummySpan" />

  </telerik:RadTextBox>

  <span id="dummySpan" style="visibility: hidden;"></span>

  <telerik:RadRating ID="RadRating1" runat="server" Precision="Exact" ItemCount="5"

      ReadOnly="True" />

  
  Some notes
  

  1. If you do not set ShowIndicator to true updateRating is not fired.
  2. When setting ShowIndicator to true but not setting IndicatorElementID property, default IndicatorElement is shown as well, which is not our goal. So I had to set IndicatorElementID to a dummy, invisible span object.
  3. null checking of radRating is required because, updateRating is fired for the initial load of page and radRating is null for the first time.
  
  Any improvements are welcome.

  Attached files

  • RadRatingForPasswordStrengthIndicator.zip

• Tsvetina Tsvetina

  Posted on Jul 14, 2011 (permalink)

  Hi Barbaros,
  
  Thanks for your submission. Indeed this is an interesting approach.
  
  If I could suggest a tip, it is to not use a span but to directly set IndicatorElementID to some dummy ID. This way would be a little more optimized since otherwise, the password strength checker would change the span's style each time it makes a calculation. At the same time, it performs a check on the existence of the element, so no errors would occur if it does not find the <span> on the page.
  
  Greetings,
  Tsvetina
  the Telerik team

  Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top

Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Input > Extending Password Strength Checker with RadRating