/*
* This notice must be untouched at all times.
============= META ==================
@name : passwordvalidator.js
@version : 0.9
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 10/06/2005
@url : http://sarat.xcelens.co.uk
@latest-version-url : http://sarat.xcelens.co.uk/2005/06/10/password-validator/
======================================
============== DESCRIPTION =============
This code snippet creates an dynamic password validator for a password fields in a form resembling the functionality provided by ASP.Net.
=========================================
========== INSTALLATION AND USAGE =============
1. Include the javascript file (passwordvalidator.js) in the head or body of your HTML page
Example:
2. Place the following password calling code IMMEDIATELY after the password field you want to validate
and replace passwordid with the ID of the password field being validated. Keep the double qoutes.
Example:
==========================================
And thats it! You have your own password field validator.
============= FEATURES ==================
- Editable validation settings to create a custom password field
- i18n support for strings
- Customisable UI
- Use on any number of password fields
============================================
============= FUTURE PLANS ==================
- Allow validator to block all submits until field is validated
- Allow automatic addition of validator to all password fields by just including
- Create XML markup tag syntax to enable designers to create validator as in .NET
==============================================
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
*/
/************** OPTIONAL EDIT BELOW THIS LINE ***********************/
/************** User specified settings *******************/
// Validation settings
var minLength = 5; // Minimum length of password
var maxLength = 8; // Maximum length of password
var noSpecialChars = true; // Sets if special characters (punctuation etc.) can be in password
var isPasswordRequired = true; // Sets if the password is a required field
var showTip = true; // Show a tip to users if their password is not perfect
// Custom strings for personalisation or i18n
var strRequired = "Obligatoria"; // Displays when nothing is entered & password is required
var strTooShort = "Demasiado corta"; // Displays when password is less than minLength
var strTooLong = "Demasiado larga"; // Displays when password is too long
var strSpecialChars = "Contiene caracteres especiales"; // Displays when user enters special chars
var strWeak = "Débil!"; // Displays when password is weak strength
var strMedium = "Justo"; // Displays when password is medium strength
var strStrong = "Óptima"; // Displays when password is perfect
// UI settings
var BackgroundColor = "#FFFFFF"; // Background color of validator
var TextColor = "#FF0000"; // Text color of validator
var TextFontFamily = "Verdana,Arial"; // Font Family
var TextSize = "13px"; // Text font size
var TextBold = true; // Is text bold?
/*************** End of user specified settings **********/
/*************** DO NOT EDIT BELOW THIS LINE ****************/
var tip = 'Consejos para crear passwords correctas\\n\\n 1. Debe contener entre '+minLength+' y '+maxLength+' caracteres. \\n 2. No debe ser una palabra del diccionario.Estas passwords son fáciles de obtener\\n 3. Debe contener al menos alguna letra en mayúscula y algún digito.';
//var tip = 'Consejos para crear passwords correctas\\n\\n 1. Debe contener entre '+minLength+' y '+maxLength+' caracteres. \\n 2. No debe ser una palabra del diccionario. Estas passwords son fáciles de obtener\\n 3. Debe contener al menos alguna letra en mayúscula y algún digito.';
/************** Create the validator **************/
function createPasswordValidator(elementToValidate)
{
// Initialise display
/// trasladado al style.css
// Get the element to validate
var elm;
if(!(elm = document.getElementById(elementToValidate)))
{
alert('Password Validator could not find your password field identified by id='+elementToValidate);
return;
}
// Create visual output
var output = 'Calidad de la contraseña ';
document.write(output);
// Register event handlers
// Use quirksmode idea for flexible registration by copying existing events
// onKeyUp
var oldEventCode = (elm.onkeyup) ? elm.onkeyup : function () {};
elm.onkeyup = function () {oldEventCode(); validatePassword(elm.id)};
// onmouseout
//oldEventCode = (elm.onmouseout) ? elm.onmouseout : function () {};
//elm.onmouseout = function() {oldEventCode(); validatePassword(elm.id)};
}
function validatePassword(elementToValidate)
{
var elm;
if(!(elm = document.getElementById(elementToValidate)))
{
return;
}
var passwordDiv = document.getElementById("_pwdvalid"+elementToValidate);
var passwordString = elm.value;
if(passwordString.length == 0)
{
passwordDiv.innerHTML = "Calidad de la contraseña: "+strRequired;
return;
}
if(passwordString.length < minLength)
{
passwordDiv.innerHTML = strTooShort;
return;
}
if(passwordString.length > maxLength)
{
passwordDiv.innerHTML = strTooLong;
return;
}
// Match special characters
if(passwordString.match(/\W/))
{
passwordDiv.innerHTML = strSpecialChars;
return;
}
var strength = 0;
// Match upper case characters
if(passwordString.match(/[a-z]/))
{
strength++;
}
// Match lower case characters
if(passwordString.match(/[A-Z]/))
{
strength++;
}
// Match digits
if(passwordString.match(/\d/))
{
strength++;
}
switch(strength)
{
case 1: passwordDiv.innerHTML = strWeak;
displayTip(passwordDiv);
break;
case 2: passwordDiv.innerHTML = strMedium;
displayTip(passwordDiv);
break;
case 3: passwordDiv.innerHTML = strStrong;
break;
}
}
function displayTip(div)
{
// Show tip
if(showTip)
div.innerHTML += ' '+' Ayuda';
}