Validator.js
- Code: Selecteer alles
/* -[ Information ]----------------
Form validator
Author: Mathieu Roseboom
Date: 05 - 04 - 2005
Last changed: 06 - 04 - 2005
Version: 0.6
--------------------------------------------------*/
// mighty constructor
function formValidator(formName, formFields)
{
this.formName = formName;
this.arrElements = new Array(formFields);
this.total = 0;
this.errorContainer = '';
this.errorIcon = 'images/icons/error.gif';
}
formValidator.prototype.SetErrorIcon = function(iconurl)
{
this.errorIcon = iconurl;
}
// add new check
formValidator.prototype.add = function(element_id, element_name, element_data, min_length, max_length, required)
{
// temporary array for storing all element information
var tmpArray = new Array(5);
tmpArray[0] = element_id;
tmpArray[1] = element_name;
tmpArray[2] = element_data;
tmpArray[3] = min_length;
tmpArray[4] = max_length;
tmpArray[5] = required;
// add element to element array
this.arrElements[this.total] = tmpArray;
this.total++;
}
// validate all elements on required, contenttype and length
formValidator.prototype.validate = function()
{
blResult = false;
this.clearErrors();
var blRequired = this.checkRequired();
var blContenttype = this.checkContenttype();
var blLength = this.checkLength();
if (blRequired == true && blContenttype == true && blLength == true)
{
if (document.getElementById(this.formName))
{
document.getElementById(this.formName).submit();
}
else if (document.getElementById(this.formName))
{
document.getElementById(this.formName).submit();
}
return true;
}
else
{
return false;
// strip all html-tags
//var re = /<\S[^>]*>/g;
//errormessage = errormessage.replace(re,"");
//alert(errormessage);
}
}
// checks each field which is required whether it's blank or not.
formValidator.prototype.checkRequired = function()
{
var blResult = true;
var tmp, i;
for (i = 0; i < this.total; i++)
{
tmp = this.arrElements[i];
if (document.getElementById(tmp[0]) && tmp[5] == true)
{
if (document.getElementById(tmp[0]).value.trim() == "")
{
blResult = false;
this.setError(tmp[0], 'Dit veld is verplicht.');
document.getElementById(tmp[0]).value = document.getElementById(tmp[0]).value.trim();
}
}
}
return blResult;
}
// checks each field on it's length
formValidator.prototype.checkLength = function()
{
var blResult = true;
var tmp, i;
for (i = 0; i < this.total; i++)
{
tmp = this.arrElements[i];
if (document.getElementById(tmp[0]))
{
if (document.getElementById(tmp[0]).value.trim() != "" && tmp[5] == true)
{
var tmpStr = document.getElementById(tmp[0]).value.trim();
// too small
if (tmpStr.length < tmp[3])
{
blResult = false;
this.setError(tmp[0],'De invoer is te kort (' + tmpStr.length + ' teken(s)) . Deze moet minimaal ' + tmp[3] + ' tekens lang zijn.');
}
// too large
else if (tmpStr.length > tmp[4])
{
blResult = false;
this.setError(tmp[0], 'De invoer is te lang (' + tmpStr.length + ' teken(s)) . Deze mag maximaal ' + tmp[4] + ' tekens lang zijn.');
}
}
}
}
return blResult;
}
// checks each field for valid content (email, url etc etc)
formValidator.prototype.checkContenttype = function()
{
var blResult = true;
var tmp, i;
for (i = 0; i < this.total; i++)
{
tmp = this.arrElements[i];
if (tmp[2] == 'checkbox')
{
if (!document.getElementById(tmp[0]).checked)
{
blResult = false;
this.setError(tmp[0], 'U dient dit veld te selecteren.');
}
}
else
{
if (document.getElementById(tmp[0]))
{
if (document.getElementById(tmp[0]).value.trim() != "")
{
switch (tmp[2])
{
case 'email':
case 'e-mail':
if (!this.isValidEmail(document.getElementById(tmp[0]).value.trim()))
{
blResult = false;
this.setError(tmp[0], 'Voer een geldig emailadres in.');
}
break;
case 'url':
case 'uri':
case 'website':
if (!this.isValidUrl(document.getElementById(tmp[0]).value.trim()))
{
blResult = false;
this.setError(tmp[0], 'Voer een geldige URL in.');
}
break;
case 'date':
case 'datum':
if (!this.isValidDate(document.getElementById(tmp[0]).value.trim()))
{
blResult = false;
this.setError(tmp[0], 'De ingevoerde datum is ongeldig. Voer de datum alsvolgt in: \'dd-mm-jjjj\'');
}
break;
case 'nummer':
case 'number':
case 'nr':
if (!this.isNumeric(document.getElementById(tmp[0]).value.trim()))
{
blResult = false;
this.setError(tmp[0], 'Dit veld moet numeriek zijn.');
}
break;
}
}
}
}
}
return blResult;
}
formValidator.prototype.setErrorContainer = function(obj_id)
{
if (document.getElementById(obj_id)) { this.errorContainer = document.getElementById(obj_id); }
}
formValidator.prototype.isValidEmail = function(s)
{
return (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/).test(s);
}
formValidator.prototype.isValidUrl = function(s)
{
var urlPattern = (/^(?:(?:ftp|https?):\/\/)?(?:[a-z0-9](?:[-a-z0-9]*[a-z0-9])?\.)+(?:com|edu|biz|org|gov|int|info|mil|net|name|museum|coop|aero|[a-z][a-z])\b(?:\d+)?(?:\/[^;"'<>()\[\]{}\s\x7f-\xff]*(?:[.,?]+[^;"'<>()\[\]{}\s\x7f-\xff]+)*)?/);
return urlPattern.test(s.toLowerCase());
}
formValidator.prototype.isNumeric = function(s) { return !isNaN(s); }
formValidator.prototype.isValidDate = function(s)
{
var blResult = false;
var temp = s.split("-");
if (temp.length == 3)
{
blResult = true;
var iDay = temp[0];
var iMonth = temp[1];
var iYear = temp[2];
if (iYear.length != 2 && iYear.length != 4) { blResult = false; }
if (iMonth.length != 1 && iMonth.length != 2) { blResult = false; }
if (iDay.length != 1 && iDay.length != 2) { blResult = false; }
if (iMonth < 1 || iMonth > 12) { blResult = false; }
var iDayFeb = (((iYear % 4 == 0) && ( (!(iYear % 100 == 0)) || (iYear % 400 == 0))) ? 29 : 28 );
if ((iMonth == 2 && iDay > iDayFeb) || iDay > 31) { blResult = false; }
if (!iYear.isNumeric(iYear)) { blResult = false; }
}
return blResult;
}
formValidator.prototype.isEmpty = function(s) { return (s.trim() == ""); }
formValidator.prototype.IsText = function(s) { return typeof s == 'string'; }
String.prototype.isNumeric = function(s)
{
var ValidChars = "0123456789.";
var IsNumber=true;
var Char;
for (i = 0; i < s.length && IsNumber == true; i++)
{
Char = s.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
String.prototype.trim = function()
{
var i = 0, j = this.length;
while (i < j && this.charAt(i) <= ' ') i++;
while (j > i && this.charAt(j - 1) <= ' ') j--;
return this.substring(i, j);
}
// get single element by its name - thanks to dexus.
//document.getElementById = function(n) { return document.getElementsByName(n)[0]; }
formValidator.prototype.setError = function (obj_id, errormessage)
{
// remove previous error if exists...
if (document.getElementById(obj_id + '_error'))
{
document.getElementById(obj_id).parentNode.removeChild(document.getElementById(obj_id + '_error'));
}
var errormsg = document.createElement('span');
errormsg.id = obj_id + '_error';
errormsg.style.font = 'normal 12px arial';
errormsg.style.color = '#ff0000';
var erroricon = document.createElement('img');
erroricon.id = obj_id + '_errorimg';
erroricon.style.cursor = 'help';
erroricon.src = this.errorIcon;
erroricon.style.width = '16px';
erroricon.style.height = '16px';
erroricon.alt = errormessage;
erroricon.title = errormessage;
//var errortxt = document.createTextNode(' ' + errormessage);
errormsg.appendChild(erroricon);
//errormsg.appendChild(errortxt);
var obj = document.getElementById(obj_id);
obj.parentNode.insertBefore(errormsg, obj.nextSibling);
obj.focus();
}
formValidator.prototype.clearErrors = function()
{
for (i = 0; i < this.total ;i++)
{
tmp = this.arrElements[i];
if (tmp[2] != 'checkbox')
{
if (document.getElementById(tmp[0] + '_error'))
{
document.getElementById(tmp[0]).parentNode.removeChild(document.getElementById(tmp[0] + '_error'));
}
}
}
}
Aanroep
- Code: Selecteer alles
<form id="testform" action="" onsubmit="validator.validate(); return false;">
tekst: <input id="tekst" name="tekst" type="text" value="" /><br />
email: <input id="email" name="email" type="text" value="" /><br />
website: <input id="website" name="website" type="text" value="" /><br />
<input type="checkbox" id="chktest" value=""/>
<input type="submit" id="btnSubmit" value="Valideren"/><br />
</form>
<script type="text/javascript">
validator = new formValidator('testform', document.forms['testform'].elements.length);
validator.add('tekst', 'blaat', 'text', 5,10,true);
validator.add('email', 'email', 'email', 5,10,true);
validator.add('website', 'website', 'url', 5,15,false);
</script>
Parameters functie add() :
- Code: Selecteer alles
id - het id van het element,
naam - een 'vriendelijke' naam van het element,
contenttype - het 'datatype' (text, email,url,date,number)
minlength - minimum lengte
maxlength - maximum lengte
verplicht - true danwel false
Zodra ik wat meer tijd heb, en mijn pc ook weer op orde is zal ik de laatste versie even plaatsen. Tevens zal ik de documentatie even uitbreiden.
