...

View Full Version : JS Form Validator Question - code



ruggeddesign
10-31-2006, 06:31 PM
I built this JS Validator Routine. I like it, it does what I need it to do.

The function loops through each element on the page. If the element is a dropdown, select, checkbox, text, or textarea input - then it looks at the className of the input. The className indicates which validation routine (0 = optional, 1 = required, 2 = email, 3 = select, etc . . ). It then validates, when it finds an error, it returns false and the writeERROR() function is called.

Here is the code:



var W3CDOM = (document.getElementsByTagName && document.createElement);

validForm = true;
firstError = null;
errorstring = '';

function valiDate()
{


var x = document.forms[0].elements;
for (var i=0;i<x.length;i++)
{
var valRoutine = x[i].className;
var input = x[i];


if(valRoutine=="0")
{
}

if(valRoutine=="1")
{
if(x[i].value=="" || x[i].value==null)
{writeERROR(input,'* Required');}
}

if(valRoutine=="2")
{
if(input.value=="" || input.value==null)
{writeERROR(input,'* Required');}
else {

var str=input.value;
var at="@";
var dot=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldot=str.indexOf(dot);

if (str.indexOf(at)==-1) // if (@ symbol not present in string)
{writeERROR(input,'* Required - Invalid Email Address.');}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr) // if (@ symbol missing, @ as 1st Char, @ as Last Char)
{writeERROR(input,'* Required - Invalid Email Address.');}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr) // if (dot missing, dot is 1st Char, dot is Last Char)
{writeERROR(input,'* Required - Invalid Email Address.');}
if (str.indexOf(at,(lat+1))!=-1) // if (there is more than one @)
{writeERROR(input,'* Required - Invalid Email Address.');}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot) // if (dot is before @ || dot comes too soon after @)
{writeERROR(input,'* Required - Invalid Email Address.');}
if (str.indexOf(dot,(lat+2))==-1)
{writeERROR(input,'* Required - Invalid Email Address.');}
if (str.indexOf(" ")!=-1) // if (there is a spce)
{writeERROR(input,'* Required - Invalid Email Address.');}
}
}

if(valRoutine=="3") // type="dropdown/select" | Check to make sure something is selected
{
if(document.forms[0].elements[i].selectedIndex=="0" || document.forms[0].elements[i].selectedIndex=="Select One")
{ writeERROR(input,'* Required'); }
}

if(valRoutine=="4") // type="checkbox" | Make sure checkbox='checked'
{
if(!input.checked)
{ writeERROR(input,'* Required'); }
}

}


if (!W3CDOM)
{ alert(errorstring); }
if (firstError)
{ firstError.focus(); }
if (validForm)
{ return true; }
return false;
}

function writeERROR(obj,message)
{
validForm = false;
if (obj.hasError) return;
if (W3CDOM)
{
obj.className += ' error';
var oldOnChange = obj.getAttribute('onchange');
obj.oldOnChange = oldOnChange;
obj.onchange = removeERROR;
var sp = document.createElement('span');
sp.className = 'error';
sp.appendChild(document.createTextNode(message));
obj.parentNode.appendChild(sp);
obj.hasError = sp;
}
else
{
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
if (!firstError)
{
firstError = obj;
}
}

function removeERROR()
{
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
this.parentNode.removeChild(this.hasError);
this.hasError = null;
var oldOnChange = this.oldOnChange;
this.onchange = oldOnChange;
this.click;
}



I am experiencing one problem. I have what I call, "controlInputs" on my page, for instance . . . I have <select> elements on my page that, depending on the user's selection, will cause other parts of the page to behave differently (show/hide, add validation information/remove information, etc. ).

The writeERROR() function changes the onChange handler for the elements where it finds errors to removeERROR(). This is a problem, because if the user goes to fix an error, and chooses an option that is supposed to trigger a whole other chain of events - the javascript will only trigger the new removeERROR function. In the code, I have stored the initial onChange parameter of elements into an 'oldOnChange' property of the element, and when the error is fixed, I have the removeERROR() function return the old onChange function to the element, but this is not good enough.

Essentially, I need to fire off two functions at the same time for the elements. I have read a lot about how you can do this in firefox using the addEventListener code, but I am designing strictly for IE users. Can somebody offer up some ideas?

ruggeddesign
11-01-2006, 05:20 PM
Anybody willing to help with this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum