I have a form that includes text fields hidden in invisible DIVS - the DIVs are displayed upon choosing a certain choice from a drop down.

I am running a checkform script to validate the form and ensure that required fields are not blank.

I need to validate the form fields in the invisible DIVs ONLY when they are displayed. I've been trying to determine a method whereby the content in the DIV would not be loaded (in the background) until that DIV is displayed. I've been trying to do this via iframes. That would be a workaround though, as I also need a way to ensure that if, after a user caused that DIV to display and then subsequently chooses a different option that caused it to disappear, the form fields in said DIV would not be checked.

The validation script:


Code:
function checkform(of)
		{
		// Test if DOM is available and there is an element called required
			if(!document.getElementById || !document.createTextNode){return;}
			if(!document.getElementById('required')){return;}

		// Define error messages and split the required fields
			var errorID='errormsg';
			var errorClass='error'
/* changes for linked list */
			var errorMsg='Please enter or change the following fields:';
/* end changes for linked list */
			var errorImg='images/alert.gif';
			var errorAlt='Error';
			var errorTitle='This field has an error!';
			var reqfields=document.getElementById('required').value.split(',');

		// Cleanup old mess
			// if there is an old errormessage field, delete it
			if(document.getElementById(errorID))
			{
				var em=document.getElementById(errorID);
				em.parentNode.removeChild(em);
			}
			// remove old images and classes from the required fields
			for(var i=0;i<reqfields.length;i++)
			{
				var f=document.getElementById(reqfields[i]);
				if(!f){continue;}
				if(f.previousSibling && /img/i.test(f.previousSibling.nodeName))
				{
					f.parentNode.removeChild(f.previousSibling);
				}
				f.className='';
			}
		// loop over required fields
			for(var i=0;i<reqfields.length;i++)
			{
		// check if required field is there
				var f=document.getElementById(reqfields[i]);
				if(!f){continue;}
		// test if the required field has an error, 
		// according to its type
				switch(f.type.toLowerCase())
				{
					case 'text':
						if(f.value=='' && f.id!='email'){cf_adderr(f)}							
		// email is a special field and needs checking
						if(f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}							
					break;
					case 'textarea':
						if(f.value==''){cf_adderr(f)}							
					break;
					case 'checkbox':
						if(!f.checked){cf_adderr(f)}							
					break;
					case 'select-one':
						if(!f.selectedIndex && f.selectedIndex==0){cf_adderr(f)}							
					break;
				}
			}
			return !document.getElementById(errorID);

			/* Tool methods */
			function cf_adderr(o)
			{
				// create image, add to and colourise the error fields
				var errorIndicator=document.createElement('img');
				errorIndicator.alt=errorAlt;
				errorIndicator.src=errorImg;
				errorIndicator.title=errorTitle;
				o.className=errorClass;
				o.parentNode.insertBefore(errorIndicator,o);

			// Check if there is no error message
				if(!document.getElementById(errorID))
				{
				// create errormessage and insert before submit button
					var em=document.createElement('div');
					em.id=errorID;
					var newp=document.createElement('p');
					newp.appendChild(document.createTextNode(errorMsg))
					em.appendChild(newp);
/* added for linked list */
					var newul=document.createElement('ul');		
					em.appendChild(newul);
/* end added for linked list */
					// find the submit button 
					for(var i=0;i<of.getElementsByTagName('input').length;i++)
					{
						if(/submit/i.test(of.getElementsByTagName('input')[i].type))
						{
							var sb=of.getElementsByTagName('input')[i];
							break;
						}
					}
					if(sb)
					{
						sb.parentNode.insertBefore(em,sb);
					}	
				} 
/* added for linked list */
				var em=document.getElementById(errorID).getElementsByTagName('ul')[0];
				var newli=document.createElement('li');
				var newa=document.createElement('a');
				for(var i=0;i<of.getElementsByTagName('label').length;i++)
				{
					if(of.getElementsByTagName('label')[i].htmlFor==o.id)
					{
						var txt=of.getElementsByTagName('label')[i].firstChild.nodeValue;
						break;
					}
				}
	
				newa.appendChild(document.createTextNode(txt));
				newa.href='#'+f.id;
				newa.onclick=function()
				{
					var loc=this.href.match(/#(\w.+)/)[1];
					document.getElementById(loc).focus();
					return false;
				}
				newli.appendChild(newa);
				em.appendChild(newli);
/* end added for linked list */
			}
			function cf_isEmailAddr(str) 
			{
			    return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
			}
		}

Here is an example of an invisible DIV implementation on the form:

Code:
<form action="/cgi-bin/mailform.pl" method="POST" onSubmit="return checkform(this);">
<input type="hidden" name="required" id="required" value="First Name,Last Name,Street,City,State,Zip,Email Address,Day Phone,Sent Via,RequestType,PurchaseType,PurchaseDescrip,Proximity" />
<label for="PurchaseType">Purchase Type</label>: <span class="red">*</span><br>
                <select name="PurchaseType" class="formfield" id='PurchaseType' 
onChange="javascript: ShowMenu(document.getElementById('PurchaseType').value,'divPurchase', 8);">
                  <option value='0'>Choose one...
                    <option value='1'>------------------------
                      <option value='2'>Education/Instruction
                        <option value='3'>Home and Garden
                        <option value='4'>Motor Vehicles
                        <option value='5'>Personal Services
                        <option value='6'>Professional Services
                        <option value='7'>Real Estate
                        <option value='8'>Small Business
                        <option value='9'>Other
                      </select>
<div id='divPurchase1' style="display: none;"></div>
<div id='divPurchase2' style="display: none;">

		  
*****THIS IS WHERE THE CONDITIONAL FIELDS APPEAR - they should only be validated when the form is submitted with the DIV visible*****

	  
</div>
</form>
Finally, here is the code for managing the invisible DIVs in the menu I've created on the form:

Code:
function ShowMenu(num, menu, max)
{
                //num is selected value, menu is the name of the div, max is the number of divs
                for(i = 1; i <= max; i++){
                        //add number onto end of menu
                        var menu_div = menu + i;

                        //if current show
                        if(i == num) {
                                document.getElementById(menu_div).style.display = 'block';
                        } else {
                                //if not, hidve
                                document.getElementById(menu_div).style.display = 'none';
                        }
                }


        }

Any ideas on how I can get this to work?