Javascript Generic Form Validation

Never write another javascript validation script again. Add a reference to this script in your pages, and add a custom attributes to your form elements to validate input. Download It. Here is an Example:

<input type=”text” name=”FistName” validate=”not_empty” msg=”Name is Required” />

Generic Form Validation Source Code

/*

Generic Form Validation.

tboland@gmail.com

http://www.techtoolblog.com

License: Free To Use, If Modified/Added

please send updated source to tboland@gmail.com

 

To Validate a Form Element Add the Custom Attribute:

validate=”VALIDATEHOW”

 

Your Current Options Are:

“not_empty”

“integer”

“number” – decimal allowed

“email”

“phone” – includes international phone numbers

 

Multiple Validation uses the following syntax:

validate=”not_empty|integer”

 

To Add a Message Add the Custom Attribute:

msg=”Name is a required field”

 

By Default the Messages are shown next to the form element.

To Show Alert Boxes add a Custom Attribute in the form tag (show_alert):

<form action=”mypage.aspx” show_alert=”1″ onSubmit=”return Validate(this);”>

 

Examples:

<html>

<head>

<script language=”JavaScript” src=”gfv.js” type=”text/javascript”></script>

</head>

<body>

<form action=”mypage.php” show_alert=”1″ onSubmit=”return Validate(this);”>

First Name <input type=”Text” name=”FirstName” maxlength=”25″ validate=”not_empty” msg=”First Name is Required” /><br/>

Email <input type=”text” name=”Email” maxlength=”25″ validate=”email” msg=”Email is Required” /><br/>

<input type=”submit” value=”Go”>

</form></body></html>

 

ADVANCED USERS:

Add Your Own Function Calls to the validate attribute.

It Must return true or false

example:

<input type=”text” name=”Age” validate=”ValidateAge” />

*/

 

function Validate(objForm) {

 

 

 var arrValidated=new Array();

 

 for (var i=0; i<objForm.elements.length; i++) {

var element=objForm.elements[i];

var elName=element.name;

if ((!elName)||(elName.length == 0)||(arrValidated[elName]))

continue;

arrValidated[elName] = true;

var validationType = element.getAttribute(“validate”);

if ((!validationType)||(validationType.length == 0))

continue;

var strMessages=element.getAttribute(“msg”);

if (!strMessages)

strMessages = “”;

var arrMessages = strMessages.split(“|”);

var arrValidationTypes = validationType.split(“|”);

for (var j=0; j<arrValidationTypes.length; j++) {

var curValidationType = arrValidationTypes[j];

var blnValid=true;

switch (curValidationType) {

case “not_empty”:

blnValid = ValidateNotEmpty(element);

break;

case “integer”:

blnValid = ValidateInteger(element);

break;

case “number”:

blnValid = ValidateNumber(element);

break;

case “email”:

blnValid = ValidateEmail(element);

break;

case “phone”:

blnValid = ValidatePhone(element);

break;

default:

try {

blnValid = eval(curValidationType+“(element)”);

}

catch (ex) {

blnValid = true;

}

}

if (blnValid == false) {

var message=“invalid value for “+element.name;

if ((j < arrMessages.length)&&(arrMessages[j].length > 0))

message = arrMessages[j];

InsertError(element, message);

if ((typeof element.focus == “function”)||(element.focus)) {

element.focus();

}

return false;

}

else

ClearError(element);

}

 

 }

 

 return true;

}

 

//Empty Validation

function ValidateNotEmpty(objElement) {

 var strValue = GetElementValue(objElement);

 var blnResult = true;

 if(allTrim(strValue) == “”) //check for nothing

 {

 blnResult = false;

 }

 return blnResult;

}

 

//Integer Validation

function ValidateInteger(objElement)

// check for valid numeric strings

{

var strString = GetElementValue(objElement);

var strValidChars = “0123456789”;

var strChar;

var blnResult = true;

 

// test strString consists of valid characters listed above

for (i = 0; i < strString.length && blnResult == true; i++)

{

strChar = strString.charAt(i);

if (strValidChars.indexOf(strChar) == -1)

{

blnResult = false;

}

}

return blnResult;

}

 

//Number Validation

function ValidateNumber(objElement)

// check for valid numeric strings

{

var strString = GetElementValue(objElement);

var strValidChars = “.0123456789”; //decimal ok

var strChar;

var blnResult = true;

 

// test strString consists of valid characters listed above

for (i = 0; i < strString.length && blnResult == true; i++)

{

strChar = strString.charAt(i);

if (strValidChars.indexOf(strChar) == -1)

{

blnResult = false;

}

}

return blnResult;

}

 

//Email Validation

function ValidateEmail(objElement) {

 // Will check for @, period after @ and text in between

 var strValue = GetElementValue(objElement);

 var in_space = strValue.indexOf(” “);

 if (in_space != -1)

 { return false; }

 

 var len = strValue.length;

 var alpha = strValue.indexOf(“@”);

 var last_alpha = strValue.lastIndexOf(“@”);

 

 if (alpha != last_alpha)

{ return false; }

 

 // No @, in first position, or name too short

 if (alpha == -1 || alpha == 0 || len<6 )

{ return false; }

 

 var last_p = strValue.lastIndexOf(“.”);

// Be sure period at least two spaces after @, but not last char.

 

 if (last_p – alpha < 2 || last_p == (len – 1) )

{ return false; }

 }

 

 

 

 //Valid PhoneNumber

 function ValidatePhone(objElement){

 // non-digit characters which are allowed in phone numbers

 var phoneNumberDelimiters = “()- “;

 // characters which are allowed in international phone numbers

 // (a leading + is OK)

 var validWorldPhoneChars = phoneNumberDelimiters + “+”;

 // Minimum no of digits in an international phone no.

 var minDigitsInIPhoneNumber = 10;

 

 var strValue = GetElementValue(objElement);

 s=stripCharsInBag(strValue,validWorldPhoneChars);

 return (ValidateInteger(s) && s.length >= minDigitsInIPhoneNumber);

 }

 

 

function GetElementValue(objElement) {

 var result=“”;

 switch (objElement.type) {

case “text”:

case “hidden”:

case “textarea”:

case “password”:

result = objElement.value;

break;

case “select-one”:

case “select”:

if (objElement.selectedIndex >= 0)

result = objElement.options[objElement.selectedIndex].value;

break;

case “radio”:

case “checkbox”:

for (var i=0; i<objElement.form.elements.length; i++) {

if (objElement.form.elements[i].name == objElement.name) {

if (objElement.form.elements[i].checked)

result += objElement.form.elements[i].value+“,”;

}

}

break;

 }

 return result;

}

 

function InsertError(element, strMessage) {

 if ((element.form.getAttribute(“show_alert”)) && (element.form.getAttribute(“show_alert”) != “0”)) {

alert(strMessage);

return;

 }

 

 var strSpanID = element.name+“_val_error”;

 var objSpan = document.getElementById(strSpanID);

 if (!objSpan) {

if ((element.type == “radio”)||(element.type == “checkbox”)) {

for (var i=0; i<element.form.elements.length; i++) {

if (element.form.elements[i].name == element.name) {

element = element.form.elements[i];

}

}

}

objSpan = document.createElement(“span”);

objSpan.id = strSpanID;

objSpan.className = “validation_error”;

var nodeAfter=0;

var nodeParent = element.parentNode;

for (var i=0; i<nodeParent.childNodes.length; i++) {

if (nodeParent.childNodes[i] == element) {

if (i < (nodeParent.childNodes.length-1))

nodeAfter = nodeParent.childNodes[i+1];

break;

}

}

if ((!nodeAfter)&&(nodeParent.parentNode)) {

nodeParent = nodeParent.parentNode;

for (var i=0; i<nodeParent.childNodes.length; i++) {

if (nodeParent.childNodes[i] == element.parentNode) {

if (i < (nodeParent.childNodes.length-1))

nodeAfter = nodeParent.childNodes[i+1];

break;

}

}

}

if (nodeAfter)

nodeParent.insertBefore(objSpan, nodeAfter);

else

document.body.appendChild(objSpan);

 }

 objSpan.innerHTML = strMessage;

}

 

function ClearError(element) {

 var strSpanID = element.name+“_val_error”;

 var objSpan = document.getElementById(strSpanID);

 if (objSpan) {

objSpan.innerHTML = “”;

 }

}

 

function allTrim(cValue){

 var lDone=false;

 while (lDone==false){

if (cValue.length==0) {return cValue;}

if (cValue.indexOf(‘ ‘)==0){cValue=cValue.substring(1);lDone=false; continue;}

else {lDone=true;}

if (cValue.lastIndexOf(‘ ‘)==cValue.length-1){cValue=cValue.substring(0, cValue.length-1);lDone=false;continue;}

else {lDone=true;}

 }

 return cValue;

}

 

function stripCharsInBag(s, bag)

{ var i;

var returnString = “”;

// Search through string’s characters one by one.

// If character is not in bag, append to returnString.

for (i = 0; i < s.length; i++)

{

// Check that current character isn’t whitespace.

var c = s.charAt(i);

if (bag.indexOf(c) == -1) returnString += c;

}

return returnString;

}


Getting free Perl scripts and Javascript code will certainly help your website. Perl script installations are easier than you think, but help is there if you need it. Custom programming will ensure that your site maintains the look you want and the style your visitors expect.

Tim

A .NET, PHP, Marketing Guru authority, at least I hope I am. Reach me at tboland@gmail.com

31 thoughts on “Javascript Generic Form Validation

  1. Good. I liked it and used it.

    There is a minor bug in phone validation. As a result the script accepts any non-numeric character in phone numbers:

    s=stripCharsInBag(strValue,validWorldPhoneChars);
    return (ValidateInteger(s) && s.length >= minDigitsInIPhoneNumber); // ValidateInteger expects form element, not string

  2. Needs to use regular expressions for validations…Would greatly simplify code.

    Here is an example:

    // Allow commas to separate thousands and a period for cents.
    function ValidateMoney(objElement) {
    var strValue = GetElementValue(objElement);
    var moneyPattern = /^(\d*|(\d{1,3}(\,\d{3})*))(\.\d{2})?$/;
    return moneyPattern.test(strValue);
    }

  3. Excellent !!!
    ThanX for such an fantastic piece of code, It has made my life easier 😉

    Usman

  4. Does this script still work? I can’t get it to validate my form – validate function does not even get called.

    Thanks

  5. Students could often find it tough to write their academic tasks. It could lead to them not getting desired grades in the academics. Opting for our Online Assignment Help could be ideal for such students and they can get a complete assignment solution from us.

Leave a Reply

Your email address will not be published. Required fields are marked *