JS Form Validator Question - code

[ruggeddesign]

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]

Anybody willing to help with this?