Password field validator : Validation : Form Control JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Form Control » Validation »

 

Password field validator



<HTML>
<HEAD>
<TITLE>jaxWidgets by Sarat Pediredla</TITLE>

<STYLE type=text/css>
BODY {
  FONT-SIZE: 0.9em; FONT-FAMILY: Arial, serif
}
{
  TEXT-DECORATION: none
}
CODE {
  CLEAR: both; DISPLAY: block; FONT-SIZE: 0.9em; FONT-FAMILY: "Courier New", arial, serif; BACKGROUND-COLOR: #00ffcc
}
highlight {
  BACKGROUND-COLOR: #ffff99
}
.header {
  PADDING-RIGHT: 15px; PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE: 2.5em; PADDING-BOTTOM: 15px; MARGIN: 0px; PADDING-TOP: 1px; LETTER-SPACING: -0.05em
}
.header SPAN {
  FONT-SIZE: 0.5em; FONT-FAMILY: Arial, serif; LETTER-SPACING: 0px
}
.toolheader {
  MARGIN: 5px 10px; COLOR: #000000; BORDER-BOTTOM: #692px solid; FONT-FAMILY: arial, serif
}
.layer {
  CLEAR: both; BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1em; BACKGROUND: #fff; PADDING-BOTTOM: 0.5em; MARGIN: 15px 5%; OVERFLOW: auto; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #ccc 1px solid
}
.input {
  BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; OVERFLOW: auto; BORDER-LEFT: #ff0000 1px solid; BORDER-BOTTOM: #ff0000 1px solid
}
.button {
  BORDER-RIGHT: #cccccc 1px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px ridge; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px ridge; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px ridge; FONT-FAMILY: serif
}
.note {
  FONT-SIZE: 0.8em
}
detailHeader {
  FONT-WEIGHT: bold
}
detailContent {
  CLEAR: left; DISPLAY: block
}
#mainmenu {
  PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; BACKGROUND: #fff; PADDING-BOTTOM: 0.2em; MARGIN: 0px; PADDING-TOP: 0.2em; BORDER-BOTTOM: #707070 2px solid
}
#mainmenu A {
  BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 16px; PADDING-BOTTOM: 3px; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; COLOR: #333; PADDING-TOP: 3px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: none
}
#mainmenu A:hover {
  BORDER-RIGHT: #9d9d9d 1px solid; BORDER-TOP: #9d9d9d 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #9d9d9d 1px solid; COLOR: #171717; BORDER-BOTTOM: #9d9d9d 1px solid
}
#mainmenu LI {
  DISPLAY: inline; LINE-HEIGHT: 200%; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
.testClass {
  CLEAR: left; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red; FONT-FAMILY: Arial, Helvetica, sans-serif
}

</style>

<!-- jaxWidgets_RuntimeEngine.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_RuntimeEngine.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Runtime Engine to register and process widgets
=========================================

============= FEATURES ==================
- Dynamically loads and parses jaxWidgets
- i18n support for strings
============================================

============= FUTURE PLANS ==================

==============================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/
// Define namespace
if (typeof jaxWidgets != "object") { var jaxWidgets = {}}

// Register namespace and object
jaxWidgets.RuntimeEngine = function()
{
  var registeredWidgets = new Array();
  var totalWidgets = -1;
  var loadedWidgets = new Array();
  var currentWidgets = new Array();
  
  this.registerWidget = function(tag, handler)
  {
    var newWidget = new Array(tag, handler);
    registeredWidgets[++totalWidgets= newWidget;
  };
  
  this.loadEngine = function()
  {
    // Load library component
    _Library = new jaxWidgets.Library();        
    for(var i=0; i <= totalWidgets; i++)
    {
      currentWidgets = document.getElementsByTagName("jax:"+registeredWidgets[i][0]);
      for(var j =0; j < currentWidgets.length; j++)
      {
        registeredWidgets[i][1].load(currentWidgets[j]);
      }
      
      _Library.cleanup(currentWidgets);
    }    
  };
  
  /*
  Debug function for testing purposes only 
  You NEED to create a div with id=debug in your page for this to work
  */
  this.writeDebug = function(string)
  {
    document.getElementById("debug").innerHTML += string + "<br>";
  };
  
  /*
  Error Log function. Can be disabled through setErrors(false)
  */
  this.writeError = function(string)
  {
    if(document.getElementById("jaxErrorLogDiv"))
    {
      document.getElementById("jaxErrorLogDiv").innerHTML += string + "<br>";
    }
    else
    {
      var logDiv = document.createElement("div");
      logDiv.setAttribute("id","jaxErrorLogDiv");
      logDiv.style.color = "red";
      logDiv.style.fontSize = "0.9em";
      logDiv.style.fontWeight = "bold";
      var bodyTag = document.getElementsByTagName("body")[0];
      bodyTag.insertBefore(logDiv,bodyTag.firstChild);
      logDiv.innerHTML = "jax Error : ";
      logDiv.innerHTML += string + "<br>";
    }
  };
      
}

// Register event handlers
// Use quirksmode idea for flexible registration by copying existing events
// onKeyUp
/******* Define GLOBAL Constants *********/
var _Engine;              // The jax Runtime Engine
var _Library;             // The jax Runtime library

_Engine = new jaxWidgets.RuntimeEngine();
var oldEventCode = (window.onload? elm.onload : function () {};
window.onload = function () {oldEventCode(); _Engine.loadEngine();};

</SCRIPT>
<!-- jaxWidgets_Library.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_Library.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The Library is a repository for common functions used by jaxWidgets
=========================================

============= FEATURES ==================
- Sets Style of elements
============================================

============= CHANGELOG ==================
17 June 2005 [17:46] [Sarat Pediredla]
- Modified code to replace getAttribute().toLowerCase() with tmpString
  because strangely IE 6.0 wont support it.
18 June 2005 [08:45] [Sarat Pediredla]
- Added functions to get X & Y position of elements.
- Modified style setters to use element.style.cssText
==========================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

// The following array IS NEEDED for widgets wishing to lock submitting forms
var submitLockedBy = new Array();

// Register object
jaxWidgets.Library = function()
{
  // Cleanup function to remove jax XML tags
  this.cleanup = function(array)
  {
    var arraylength = array.length;
    for(var i=0; i < arraylength; i++)
    {
      var element = array[0];
      element.parentNode.removeChild(element);
    }
    return true;
  }
  
  // Gets the index of an element in an array
  this.getIndex = function(element,array)
  {
    for(var i=0; i < array.length; i++)
    {
      if(array[i== element)
        return i;
    }
  }
  // Sets the CSS style from source to target element
  this.setStyle = function(sourceElement,targetElement)
  {
    if(sourceElement.getAttribute("style"&& sourceElement.getAttribute("style").length > 0)
    {
      targetElement.style.cssText = sourceElement.getAttribute("style");
      return;
    }
    if(sourceElement.getAttribute("class"&& sourceElement.getAttribute("class").length > 0)    
    {      
      targetElement.setAttribute("className",sourceElement.getAttribute("class"));
      targetElement.setAttribute("class",sourceElement.getAttribute("class"));
      return;
    }
  }
  
  // Returns parent form of a given element
  this.getParentForm = function(element)
  {
    for(var i=0;i < document.forms.length; i++)
    {
      if(document.forms[i][element.id== element)
        return document.forms[i];
    }
    _Engine.writeError("jax Error : Your elements are not embedded inside a form");
    return null;
  }
  
  // Returns the submit button for a given form
  this.getSubmitElement = function(currentForm)
  {
    for(i=0;i<currentForm.length;i++)
    {
      var currentElement = currentForm.elements[i];
      var tmpString = currentElement.type;
      if(tmpString.toString().toLowerCase() == "submit")
        return currentElement;
    }
  }
  
  // Disables submitting of forms when fields not validated
  this.disableSubmit = function(element)
  {    
    form this.getParentForm(element);
    var btnSubmit = this.getSubmitElement(form);    
    if(btnSubmit)
      btnSubmit.disabled = true;
  }
  
  this.enableSubmit = function(element)
  {    
    form this.getParentForm(element);
    var btnSubmit = this.getSubmitElement(form);
    if(btnSubmit)
      btnSubmit.disabled = false;
  }
  
  this.lockSubmit = function(id)
  {
    var index = _Library.getIndex(id,submitLockedBy)
    if(!(index >= 0))
    {
      submitLockedBy.push(id);    
    }  
    _Library.disableSubmit(document.getElementById(id));
  }
  
  this.unlockSubmit = function(id)
  {
    var index = _Library.getIndex(id, submitLockedBy);
    if(index > -1)
    {
      submitLockedBy.pop(index);
      if(_Library.noSubmitLocks())
        _Library.enableSubmit(document.getElementById(id));
    }
  }
    
  this.noSubmitLocks = function()
  {
    if(submitLockedBy.length <= 0)
      return true;
    return false;
  }
  
  this.getXPos = function(element)
  {
      xPos = element.offsetLeft;
      tempEl = element.offsetParent;
        while (tempEl != null
      {
        xPos += (tempEl.offsetLeft);
          tempEl = tempEl.offsetParent;
        }
      return xPos;
  }
  
  this.getYPos = function(element)
  {    
      yPos = element.offsetTop;
      tempEl = element.offsetParent;
        while (tempEl != null
      {
        yPos += tempEl.offsetTop;
          tempEl = tempEl.offsetParent;
        }
      return yPos;    
  }
          
}
  
</SCRIPT>

<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.

============= META ==================
@name : jaxWidgets_PasswordValidator.js  
@version : 0.10 
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================

============== DESCRIPTION =============
The password validator widget is a part of the jaxWidgets library. It provides
dynamic in-page validation of passwords based on rules set by the user.
=========================================

============= FEATURES ==================
- Uses jaxXML markup tags to specify designer friendly tags in HTML (.NET style)
- i18n support for strings
- Customisable UI
- Use on any number of password fields
============================================

============= CHANGELOG ==================
17 June 2005 [17:46]
- Modified code to replace getAttribute().toLowerCase() with tmpString
  because strangely IE 6.0 wont support it.
21 June 2005 [09:48]
- Changed DOM code to add element at the jax tag position to allow flexibility
==========================================

LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

// Register namespace and object
jaxWidgets.PasswordValidator = function()
{
// Validation settings
var minLength = 0;             // Minimum length of password
var maxLength = 255;            // Maximum length of password
var noSpecialChars = true;     // Sets if special characters (punctuation etc.) can be in password
var isRequired = false;  // Sets if the password is a required field
var showTip = true;             // Show a tip to users if their password is not perfect

// i18n settings
var strRequired = "Required";     // Displays when nothing is entered & password is required
var strShort = "Password too short";   // Displays when password is less than minLength 
var strLong = "Password too long";      // Displays when password is too long
var strSpecialChars = "Special characters not allowed";     // Displays when user enters special chars
var strWeak = "Password is easy guess!";       // Displays when password is weak strength
var strMedium = "Password could be better";   // Displays when password is medium strength
var strStrong = "Perfect password!";          // Displays when password is perfect
var strTip = 'Tips on creating the right password\n1.Should be between '+minLength+' and '+maxLength+' characters \n2.Should not be a word from the common dictionary. These passwords are easiest to guess!\n3.Should have atleast one uppercase letter, one lowercase letter and one digit.';

var tmpString;

// Create the validator 
this.load = function(element)
  {      
    if(!element)
    {
      _Engine.writeError('jax Error: Password Field Validator cannot load');
      return;
    }
        
    var passwordElement = document.getElementById(element.getAttribute("ControlToValidate"));
    if(!passwordElement)
    {
      _Engine.writeError('jax Error: Password validator is missing a ControlToValidate attribute');
      return;
    }    
        
    // Create password layer
    var validatorElement = document.createElement("span");
    validatorElement.setAttribute("id",passwordElement.id+"_pwdvalid");
    
    element.parentNode.insertBefore(validatorElement,element.nextSibling);
    
    // Standard function to parse the custom jax tag
    this.parseTag(element,validatorElement);    
    
    // Create style for current element using DOM compatible function from Library
    _Library.setStyle(element, validatorElement);
    
    tmpString = validatorElement.getAttribute("isRequired")
    if(tmpString.toString().toLowerCase() == "true")
    {
      _PasswordValidator.validate(passwordElement.id);
    }
      
    // Register event handlers
    // Use quirksmode idea for flexible registration by copying existing events
    // onKeyUp
    var oldEventCode = (passwordElement.onkeyup? passwordElement.onkeyup : function () {};
    passwordElement.onkeyup = function () {oldEventCode(); _PasswordValidator.validate(passwordElement.id)};            
  };
  
  this.validate = function(id
  {
    var element;
    if(!(element = document.getElementById(id)))
    {
      return false;
    }
    var passwordDiv = document.getElementById(id+"_pwdvalid");
    var passwordString = element.value;    
    if(passwordString.length == 0)
    {
      tmpString = passwordDiv.getAttribute("isRequired");
      var isRequired = tmpString.toString().toLowerCase();
      if(isRequired == "true")
      {
        passwordDiv.innerHTML = passwordDiv.getAttribute("strRequired");
        _Library.lockSubmit(element.id);
        return false;
      }
      else
      {
        passwordDiv.innerHTML = "";
      }
      return true;
    }
    if(passwordString.length < passwordDiv.getAttribute("strShort"))
    {
      passwordDiv.innerHTML = strShort;
      _Library.lockSubmit(element.id);
      return false;
    }
    if(passwordString.length > passwordDiv.getAttribute("strLong"))
    {
      passwordDiv.innerHTML = strLong;
      _Library.lockSubmit(element.id);
      return false;;
    }
    // Match special characters
    tmpString = passwordDiv.getAttribute("noSpecialChars");
    if(passwordString.match(/W/&& tmpString.toString().toLowerCase() == "true")
    {
      passwordDiv.innerHTML = strSpecialChars;
      _Library.lockSubmit(element.id);      
      return false;;
    }          
    var strength = 0;
    // Match lower case characters
    if(passwordString.match(/[a-z]/))
    {
      strength++;
    }
    // Match upper case characters
    if(passwordString.match(/[A-Z]/))
    {
      strength++;
    }
    // Match digits
    if(passwordString.match(/d/))
    {
      strength++;
    }    
    switch(strength)
    {
      case 1: passwordDiv.innerHTML = passwordDiv.getAttribute("strWeak");
          _PasswordValidator.displayTip(passwordDiv, element);
          break;
      case 2: passwordDiv.innerHTML = passwordDiv.getAttribute("strMedium");
          _PasswordValidator.displayTip(passwordDiv, element);
          break;
      case 3: passwordDiv.innerHTML = passwordDiv.getAttribute("strStrong");
          break;
    }        
    // If we have reached here, then all is ok
    _Library.unlockSubmit(element.id);
    return true;
  };
    
this.displayTip = function(div)
  {    
    // Show tip
    tmpString = div.getAttribute("showTip");
    if(tmpString.toString().toLowerCase() == "true")    
      div.innerHTML += '&nbsp;'+'<a href="javascript:alert(''+div.getAttribute("strTip")+'');" style="font-size:smaller; text-decoration: none">Tip</a>';
  };
  
  this.registerWithEngine = function(_PasswordValidator)
  {
    var tag = "PasswordValidator";
    var handler = _PasswordValidator;
    _Engine.registerWidget(tag, handler);
  };
  
  /********* Custom tag parser **********/
  this.parseTag = function(element,validatorElement)
  {
    if(element.getAttribute("MaxLength"))
      validatorElement.setAttribute("maxLength",element.getAttribute("MaxLength"));
    else
      validatorElement.setAttribute("maxLength",maxLength);
      
    if(element.getAttribute("MinLength"))
      validatorElement.setAttribute("minLength",element.getAttribute("MinLength"));
    else
      validatorElement.setAttribute("minLength",minLength);
      
    if(element.getAttribute("NoSpecialChars"))
      validatorElement.setAttribute("noSpecialChars",element.getAttribute("NoSpecialChars"));
    else
      validatorElement.setAttribute("noSpecialChars",noSpecialChars);
      
    if(element.getAttribute("ShowTip"))
      validatorElement.setAttribute("showTip",element.getAttribute("ShowTip"));
    else
      validatorElement.setAttribute("showTip",showTip);
      
      if(element.getAttribute("Required"))
      validatorElement.setAttribute("isRequired",element.getAttribute("Required"));
    else
      validatorElement.setAttribute("isRequired",isRequired);
      
    if(element.getAttribute("TextTip"))
      validatorElement.setAttribute("strTip",element.getAttribute("TextTip"));
    else
      validatorElement.setAttribute("strTip",strTip);
      
    if(element.getAttribute("TextRequired"))
      validatorElement.setAttribute("strRequired",element.getAttribute("TextRequired"));
    else
      validatorElement.setAttribute("strRequired",strRequired);
      
    if(element.getAttribute("TextShort"))
      validatorElement.setAttribute("strShort",element.getAttribute("TextShort"));
    else
      validatorElement.setAttribute("strShort",strShort);
      
    if(element.getAttribute("TextLong"))
      validatorElement.setAttribute("strLong",element.getAttribute("TextLong"));
    else
      validatorElement.setAttribute("strLong",strLong);
      
    if(element.getAttribute("TextStrengthWeak"))
      validatorElement.setAttribute("strWeak",element.getAttribute("TextStrengthWeak"));
    else
      validatorElement.setAttribute("strWeak",strWeak);
      
    if(element.getAttribute("TextStrengthMedium"))
      validatorElement.setAttribute("strMedium",element.getAttribute("TextStrengthMedium"));
    else
      validatorElement.setAttribute("strMedium",strMedium);
      
    if(element.getAttribute("TextStrengthStrong"))
      validatorElement.setAttribute("strStrong",element.getAttribute("TextStrengthStrong"));
    else
      validatorElement.setAttribute("strStrong",strStrong);    
  };          
}

var _PasswordValidator = new jaxWidgets.PasswordValidator();
_PasswordValidator.registerWithEngine(_PasswordValidator);
</SCRIPT>

<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY>
<H2>Demo</H2>
<DIV class=layer id=jaxDetail>This is a simple PasswordValidator <BR><BR>
<FORM id=testForm>
<INPUT id=test1 type=password> 
<JAX:PASSWORDVALIDATOR Required="true" ControlToValidate="test1">
</JAX:PASSWORDVALIDATOR><BR>
<INPUT type=submit value=Submit> 
</FORM>
</BODY>
</HTML>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Form Control
» Validation