Password field validator
<HTML>
<HEAD>
<TITLE>jaxWidgets by Sarat Pediredla</TITLE>
<STYLE type=text/css>
BODY {
FONT-SIZE: 0.9em; FONT-FAMILY: Arial, serif
}
A {
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: #69c 2px 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 += ' '+'<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>
Related examples in the same category
