Javascript to validate password complexity

[Mike Cooper]

If anybody is interested, here is a Javascript function to test that a password meets complexity requirements. In this case, I set the function to test for a minimum length of 8, 1 uppercase, 1 lowercase and 1 number, but you could modify it to your own rules:

function checkPW(oEvent){
                  var anUpperCase = /[A-Z]/;
                  var aLowerCase = /[a-z]/; 
                  var aNumber = /[0-9]/;
                  var aSpecial = /[!|@|#|$|%|^|&|*|(|)|-|_]/;
                  var p = oWebApp.oChangeMyPassword.oWebMainPanel.oCrazyTown1.get("psValue");
                  var p2 = oWebApp.oChangeMyPassword.oWebMainPanel.oCrazyTown2.get("psValue"); 
                  
                  if(p.length < 8){
                      oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage1.set("psUrl", "Images/checkmarkx2020_38.gif");
                      oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage2.set("psUrl", "Images/checkmarkx2020_38.gif");
                      //oWebApp.oChangeMyPassword.oWebMainPanel.oChangePWBtn.set("pbEnabled", false);
                  }
                  if(p.length >= 8){
                      var numUpper = 0;
                      var numLower = 0;
                      var numNums = 0;
                      var numSpecials = 0;
                      for(var i=0; i<p.length; i++){
                          if(anUpperCase.test(p[i]))
                              numUpper++;
                          else if(aLowerCase.test(p[i]))
                              numLower++;
                          else if(aNumber.test(p[i]))
                              numNums++;
                          else if(aSpecial.test(p[i]))
                              numSpecials++;
                      }
                   
                      if(numUpper < 1 || numLower < 1 || numNums < 1 || numSpecials <0){
                          oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage1.set("psUrl", "Images/checkmarkx2020_38.gif");
                          oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage2.set("psUrl", "Images/checkmarkx2020_38.gif");
                          //oWebApp.oChangeMyPassword.oWebMainPanel.oChangePWBtn.set("pbEnabled", false);
                      } else {
                          oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage1.set("psUrl", "Images/checkmark2020_38.gif");
                          if (p == p2) {
                              //oWebApp.oChangeMyPassword.oWebMainPanel.oChangePWBtn.set("pbEnabled", true);
                              oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage2.set("psUrl", "Images/checkmark2020_38.gif");
                          } else {
                              //oWebApp.oChangeMyPassword.oWebMainPanel.oChangePWBtn.set("pbEnabled", false);
                              oWebApp.oChangeMyPassword.oWebMainPanel.oGoodPWImage2.set("psUrl", "Images/checkmarkx2020_38.gif");
                          }                          
                          
                      }
                  }
                  
            
              }

Object oChangeMyPassword is a cWebView
    Set piWidth to 700
    Set psCaption to "Change My Password"

    // Your DDO structure will go here

    Object oWebMainPanel is a cWebPanel
        Set piColumnCount to 12
        
        // place controls here
        // Your view will grow as controls are added
        
        Object oCrazyTown1 is a cWebForm
            Set piColumnSpan to 10
            Set psLabel to "Label 1:"
            Set pbShowLabel to False
            //Set pbPassword to True
            Set psAutoComplete to 'off'
            Set psPlaceHolder to 'enter your new password here'
            Set pbServerOnBlur to True
            Set pbServerOnFocus to True
            Set pbPromptButton to True
            Set pbServerOnPrompt to True
        
            
            Set psClientOnInput to 'checkPW'
            Set piMaxLength to 20
            
            Procedure Prompt 
                WebSet psCSSClass to ''
            End_Procedure
            
            Procedure OnFocus
                String sVal
                //WebGet psValue to sVal
                //Move (Trim(sVal)) to sVal
                //If (sVal='') WebSet psPlaceHolder to 'password'
                //Else WebSet psPlaceHolder to ''
                WebSet psPlaceHolder to ''
                WebSet psCSSClass to 'dotsonly'
            End_Procedure
            
            Procedure OnBlur
                String sVal
                WebSet psPlaceHolder to 'enter your new password here'
                WebGet psValue to sVal
                Move (Trim(sVal)) to sVal
                If (sVal='') WebSet psCSSClass to ''
                Else WebSet psCSSClass to 'dotsonly'
            End_Procedure
        End_Object

        Object oGoodPWImage1 is a cWebImage
            Set piColumnSpan to 2
            Set piColumnIndex to 10
            Set piHeight to 70
            Set psUrl to 'Images/Checkmarkx2020_38.gif'
        End_Object
        
        Object oCrazyTown2 is a cWebForm
            Set piColumnSpan to 10
            Set psLabel to "Label 1:"
            Set pbShowLabel to False
            //Set pbPassword to True
            Set psAutoComplete to 'off'
            Set psPlaceHolder to 'confirm your new password here'
            Set piMaxLength to 20
            Set pbServerOnBlur to True
            Set pbServerOnFocus to True
            Set psClientOnInput to 'checkPW'
            Set pbPromptButton to True
            Set pbServerOnPrompt to True
            
            Procedure Prompt 
                WebSet psCSSClass to ''
            End_Procedure
            
        
        
            
            Procedure OnFocus
                String sVal
                //WebGet psValue to sVal
                //Move (Trim(sVal)) to sVal
                //If (sVal='') WebSet psPlaceHolder to 'password'
                //Else WebSet psPlaceHolder to ''
                WebSet psPlaceHolder to ''
                WebSet psCSSClass to 'dotsonly'
            End_Procedure
            
            Procedure OnBlur
                String sVal
                WebSet psPlaceHolder to 'confirm your new password here'
                WebGet psValue to sVal
                Move (Trim(sVal)) to sVal
                If (sVal='') WebSet psCSSClass to ''
                Else WebSet psCSSClass to 'dotsonly'
            End_Procedure
        End_Object
        
        Object oGoodPWImage2 is a cWebImage
            Set piColumnSpan to 2
            Set piColumnIndex to 10
            Set piHeight to 70
            Set psUrl to 'Images/Checkmarkx2020_38.gif'
        End_Object

        Object oChangePWBtn is a cWebButton
            Set piColumnSpan to 10
            Set psCaption to "Change Password"
            //Set pbEnabled to False
        
            Procedure OnClick
                String sPW1 sPW2
                Number nStrength
                //put save routine here
                Send ShowInfoBox 'Your Password has been updated.' 'INFO'
                
            End_Procedure
        End_Object

        Object oRules is a cWebLabel
            Set piColumnSpan to 10
            Set psCaption to ("Passwords must be at least 8 characters long"+Character(13)+Character(10);
                              +"Must contain at least 1 MAJISCULE Letter (A-Z)"+Character(13)+Character(10);
                              +"Must contain at least 1 MINISCULE Letter (a-z)"+Character(13)+Character(10);
                              +"Must contain at least 1 NUMBER (0-9)"+Character(13)+Character(10);
                              +"Recommended to also use special characters (like $%&?!*#/_-+)")
        End_Object
        
        
        
    End_Object 

End_Object

Looks like this:


PS... I don't use pbPassword in my forms, so you will likely need to make that modification. Then you can remove the OnFocus and OnBlur Procedures that I have in my code