CODEWITHSUNDEEP
c#asp.net.netasp.net-mvcasp.net-ajax
4thSpace
4thSpace

Reputation: 44352

How to check password strength only after min characters?

I'm using the AjaxControlToolKit's PasswordStrength control. Once the user begins typing anything into the control, it starts displaying a message that the password is weak. I would like this message to appear only after the mininum number of characters have been typed in. I don't see anything on the control that allows this functionality. Any suggestions on how I should handle this?

Upvotes: 3

Views: 2419

Answers (2)

dparsons
dparsons

Reputation: 2876

You are probably going to need to roll your own solution for this which makes sense if you think about it. By hiding the visual cue that a password of two characters is weak but displaying it for a password of three characters would seem to imply that the two character password is sufficient.

That being said what you might be able to do is write some sort of hack similar to this:

<script language="javascript">
  function onPasswordChange(textBox) {
      var passwordLabel = document.getElementById([labelID]);
      if(textBox.value.length < [constant]){
          passwordLabel.style.display = 'none';
      }
      else{
          passwordLabel.style.display = 'inline';            
      } 
  }
</script>

You could then attach this function the controls change onKeyUp or onKeyDown event so that if the length of the password field was less than what you want it to be it will hide the label that contains the message that the strength has not been met. This is untested an only a thought. You may wind up with issue from the toolkit javascript colliding with this script but it is tough to say.

Additionally the labelID looks to be [controlIDName]_PasswordStrength.

Edit:

You would probably want to add the onchange onKeyUp or onKeyDown event to your control like so (code behind):

control.Attributes.Add("onchange", "onPasswordChange(this)");

 control.Attributes.Add("onKeyDown", "onPasswordChange(this)");

Edit 2: As far as hacks go this is pretty messy but it works. Clientside:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:TextBox ID="password" runat="server"></asp:TextBox>
<div id="PasswordStrengthContainer"></div>
<asp:PasswordStrength ID="PS" runat="server"
TargetControlID="password"  
DisplayPosition="RightSide"  
StrengthIndicatorType="Text"  
PreferredPasswordLength="10"  
PrefixText="Strength:"  
TextCssClass="TextIndicator_TextBox1"  
MinimumNumericCharacters="0"  
MinimumSymbolCharacters="0"  
RequiresUpperAndLowerCaseCharacters="false"  
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"  
TextStrengthDescriptionStyles="cssClass1;cssClass2;cssClass3;cssClass4;cssClass5"  
CalculationWeightings="50;15;15;20"
/>

 <script language="javascript">


function onPasswordChange(textBox) {
    var passwordLabel = document.getElementById("MainContent_password_PasswordStrength");
    var container = document.getElementById("PasswordStrengthContainer");

    if (passwordLabel != null) {
        document.getElementById("PasswordStrengthContainer").appendChild(
            document.getElementById("MainContent_password_PasswordStrength"));
    }

    if (textBox.value.length < 4) {
        container.style.display = 'none';
    }
    else {
        container.style.display = 'inline';
    }
}
 </script>

Serverside: 

 password.Attributes.Add("onKeyDown", "onPasswordChange(this)");
 password.Attributes.Add("onBlur", "onPasswordChange(this)");

This code is not efficient and could be cleaned up but works for demonstrative purposes. The javascript function is pretty basic however you will notice this line:

 if (passwordLabel != null) {
        document.getElementById("PasswordStrengthContainer").appendChild(
            document.getElementById("MainContent_password_PasswordStrength"));
    }

Unfortunately the toolkits javascript functions will fire AFTER your function so setting the display to 'none' is wiped out by the toolkit. what this code does is remove the label from the page and places it in the div then we merely set the display property of our div to whatever and that will effectively hide the label. There is a singular bug though: when hitting backspace to delete characters the div doesn't disappear in certain instances. I don't really have time to track down the issue but it should be trivial for you to clear it up.

Additionally I was having some problems with onChange in Chrome so opted for onKeyDown instead as @Adriano pointed out above.

Upvotes: 1

Adriano Repetti
Adriano Repetti

Reputation: 67118

Attach to the client-side change keyup event of the text input. There you can add/remove a special CSS class in the TextCssClass (if you're using text) with just one rule: display: none (using the text length as condition).

Upvotes: 2

Related Questions