Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts

    JS Form Validator Question - code

    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:

    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?

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Anybody willing to help with this?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •