JavaScript Form Validation

[luckysarea]

I have a form validation script that runs perfect. Now i want to add one more field to the form and want to make some fields “required” but i dont know how to do this. Please help me.
I am also attaching the relevant files. Thanks in advance.

Fields to add:

1. Social Security Number (Same as Home Telephone but allows 3 digits in 1st field, 2 in 2nd and 4in 3rd field (123)-(12)-(1234))

Fields to make “required” :
Email
Social Security Number
First Name
Last Name

The Script

var phoneRegEx = /^(?:(?:\\(?(?:(?:[246-8](?:(?:[02-8][0-9])|(?:1[02-9])))|(?:3(?:(?:[02-68][0-9])|(?:1[02-9])))|(?:5(?:(?:[02-46-8][0-9])|(?:5[0-46-9])|(?:1[02-9])))|(?:9(?:(?:[02-578][0-9])|(?:1[02-9]))))\\)?)(?:[\\- ]?)(?:(?:700(?:[\\- ]?)(?:(?:[0-35-9][0-9]{3})|(?:4[02-9][0-9]{2})|(?:41[0-35-9][0-9])|(?:414[02-9])))|(?:(?:(?:[23468][02-9][0-9])|(?:[2-9]1[02-9])|(?:5(?:(?:5[0-46-9])|(?:[02346-9][0-9])|(?:1[02-9])))|(?:7(?:(?:[2-9][0-9])|(?:0[1-9])|(?:1[02-9])))|(?:9(?:(?:[0234689][0-9])|(?:1[02-9])|(?:5[1-7])|(?:7[0-5789]))))(?:[\\- ]?)(?:[0-9]{4}))))$/;
var error // used to store RowNames for errored elements.

var isOptRequired = false;


function ValidateQuoteRequest(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckDropDown('state', 'row_state', frm);
CheckDropDown('Month', 'row_date', frm);
CheckDropDown('Day', 'row_date', frm);
CheckDropDown('Year', 'row_date', frm);
CheckDate('Month', 'Day','Year', 'row_date', frm, 'True');
CheckDropDown('Sex', 'row_sex', frm);
CheckDropDown('Height_Feet', 'row_Height', frm);
CheckDropDown('Height_Inches', 'row_Height', frm);
CheckIntegerField('Weight', 'row_Height', frm, 'True');
CheckDropDown('Tobacco', 'row_tobacco', frm);
CheckFrequency('Frequency', 'row_tobaccotype', frm, 'True');
CheckPhone('workphone,homephone', 'row_workphone,row_homephone', frm, 'False');
CheckEmail('email', 'row_email', frm, 'False');

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateRequestApplication(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckTextField('firstname', 'row_firstname', frm,);
CheckTextField('lastname', 'row_lastname', frm);
CheckTextField('address', 'row_address', frm);
CheckTextField('city', 'row_city', frm);
CheckTextField('state', 'row_state', frm);
CheckZip('zip', 'row_state', frm, 'True');
CheckPhone('work_phone_number_,home_phone_number_,cell_phone_number_', 'row_work_phone_number_,row_home_phone_number_,row_cell_phone_number_', frm, 'True');
CheckNumericField('work_phone_number_4', 'row_work_phone_number_', frm, 'False');
CheckEmail('email', 'row_email', frm, 'True');
CheckDropDown('premium_quoted', 'row_premium_quoted', frm);
CheckRadioButton('Residency', 'row_Residency', frm);
CheckRadioButton('spouse_policy', 'row_spouse_policy', frm);
CheckSpouseTextField('spouse_first_name', 'row_spouse_first_name', frm);
CheckSpouseTextField('spouse_last_name', 'row_spouse_last_name', frm);
CheckDropDown('AgentID', 'row_AgentID', frm);

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateRBCRequestApplication(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckTextField('firstname', 'row_firstname', frm);
CheckTextField('lastname', 'row_lastname', frm);
CheckTextField('address', 'row_address', frm);
CheckTextField('city', 'row_city', frm);
CheckTextField('state', 'row_state', frm);
CheckZip('zip', 'row_state', frm, 'True');
CheckPhone('work_phone_number_', 'row_work_phone_number_', frm, 'True');
CheckEmail('email', 'row_email', frm, 'True');

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateRBCQuoteRequest(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckDropDown('state', 'row_state', frm);
CheckDropDown('Sex', 'row_Sex', frm);
CheckDate('Month', 'Day','Year', 'row_date', frm, 'True');
CheckDropDown('Amount', 'row_Amount', frm);
CheckRadioButton('coverageTerm', 'row_coverageTerm', frm);
CheckRadioButton('tobacco', 'row_tobacco', frm);
CheckTextField('firstname', 'row_firstname', frm);
CheckTextField('lastname', 'row_lastname', frm);
CheckPhone('home_phone_number_', 'row_home_phone_number_', frm, 'True');
CheckEmail('email', 'row_email', frm, 'True');

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateHealth(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckEmail('Email', 'row_Email', frm, 'True');
CheckZip('ZipCode', 'row_ZipCode', frm, 'True');

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateHome(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckEmail('Email', 'row_Email', frm, 'True');
CheckZip('ZipCode', 'row_ZipCode', frm, 'True');

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateLTC(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckDropDown('state', 'row_state', frm);

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible
	{
		return true;
	}

}

function ValidateAuto(frm)
{
	if(isBrowserCompatible())
	{
		error = new Array();
CheckZip('zipcode', 'row_zipcode', frm, 'True');

		if (error.length > 0)
		{
			//turn on error header and scroll page to error header
			document.getElementById("contentError").style.display = "";
			location = '#contentError';
			return false;
		}
		else
		{
			document.getElementById("contentError").style.display = "none";
			return true;
		}
	}
	else   //browser not compatible 
	{
		return true;
	}

}



//-------
function CheckAnnualIncome (ElmtName, RowName, frm,isReq)
{

    if(!frm.elements[ElmtName + '_decline'].checked)
        CheckNumericField (ElmtName,RowName, frm, isReq);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}

//-------
function CheckTextField (ElmtName, RowName, frm)
{
	if (!frm.elements[ElmtName])
		return;
	if(trim(frm.elements[ElmtName].value) == '')
		ThrowError(ElmtName, RowName, frm);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}
//----
function CheckSpouseTextField (ElmtName, RowName, frm)
{
	if (!frm.elements[ElmtName])
		return;
	for(var i=0;i < frm.spouse_policy.length; i++)
	{
		if(frm.spouse_policy[i].checked && frm.spouse_policy[i].value == 'yes')
		{
			CheckTextField (ElmtName, RowName, frm);
		}else{
			removeErrorFormatting(ElmtName, RowName, frm);
		}
	}

}
//------
function CheckNumericField(ElmtName, RowName, frm, isReq)
{
	if (frm.elements[ElmtName].value != '' || isReq.toLowerCase() == 'true')
	{
		var val = frm.elements[ElmtName].value.replace(/,/g,'');
        val = val.replace('$', '');
        
        if(parseFloat(val)!=(val*1) || val == '')
			ThrowError(ElmtName, RowName, frm);
		else
			removeErrorFormatting(ElmtName, RowName, frm);
	}
	else
	{
		removeErrorFormatting(ElmtName, RowName, frm);
	}
}

function CheckIntegerField(ElmtName, RowName, frm, isReq)
{
	if (frm.elements[ElmtName].value != '' || isReq.toLowerCase() == 'true')
	{
		if(frm.elements[ElmtName].value.indexOf('.') != -1 || (frm.elements[ElmtName].value % 1) != 0 || frm.elements[ElmtName].value == '')
			ThrowError(ElmtName, RowName, frm);
		else
			removeErrorFormatting(ElmtName, RowName, frm);
	}
	else
	{
		removeErrorFormatting(ElmtName, RowName, frm);
	}
}

//-----
function CheckEmail (ElmtName, RowName, frm, isReq)
{
//add for optimost required field testing.
if(isOptRequired)
    isReq = 'true';

	var regEx;
	regEx = /^[\\w-]+(?:\\.[\\w-]+)*@(?:[\\w-]+\\.)+[a-zA-Z]{2,7}$/;


	if(!regEx.test(frm.elements[ElmtName].value) && (frm.elements[ElmtName].value != '' || isReq != 'False'))
		ThrowError(ElmtName, RowName, frm);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}

//-------
function CheckDate(ElmtMonth, ElmtDay, ElmtYear, RowName, frm, isReq) {
	var Day = frm.elements[ElmtDay].options[frm.elements[ElmtDay].selectedIndex].value;
	var Month = frm.elements[ElmtMonth].options[frm.elements[ElmtMonth].selectedIndex].value - 1;
	var Year = frm.elements[ElmtYear].options[frm.elements[ElmtYear].selectedIndex].value;
	var DateObj = new Date(Year,Month,Day);
	
	if ( DateObj.getMonth() != Month) {
		ThrowError(RowName, RowName, frm);
	} else {
		removeErrorFormatting(RowName, RowName, frm);
	}
}

//-------
function CheckZip(ElmtName, RowName, frm, isReq)
{
	var regEx
	regEx = /^\\d{5}$|^\\d{5}-\\d{4}$/;

	if(!regEx.test(frm.elements[ElmtName].value) && (frm.elements[ElmtName].value != '' || isReq != 'False'))
		ThrowError(ElmtName, RowName, frm);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}

//------
function CheckDropDown(ElmtName, RowName, frm)
{
	if (!frm.elements[ElmtName])
		return;

	if(frm.elements[ElmtName].options.selectedIndex == 0)
		ThrowError(ElmtName, RowName, frm);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}

//-------
function CheckRadioButton(ElmtName, RowName, frm)
{
	if (!frm.elements[ElmtName])
		return;

	var radioChecked = false;
	for(var i=0;i < frm.elements[ElmtName].length; i++)
	{
		if(frm.elements[ElmtName][i].checked)
		{
			radioChecked = true;
			break;
		}
	}
	if(!radioChecked)
		ThrowError(ElmtName, RowName, frm);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}
//-------
function CheckCheckboxes(ElmtName, RowName, frm)
{
	if (!frm.elements[ElmtName])
		return;

	var checkboxChecked = false;
	for(var i=0;i < frm.elements[ElmtName].length; i++)
	{
		if(frm.elements[ElmtName][i].checked)
		{
			checkboxChecked = true;
			break;
		}
	}
	if(!checkboxChecked)
		ThrowError(ElmtName, RowName, frm);
	else
		removeErrorFormatting(ElmtName, RowName, frm);
}
//-------
function CheckPhone(ElmtNames, RowNames, frm, isReq)
{
//add for optimost required field testing.
if(isOptRequired)
    isReq = 'true';
	checkPhoneNumbers(ElmtNames, RowNames, frm, isReq)
}
//------
function CheckFrequency(ElmtName, RowName, frm)
{
	var Tobacco = new Array(3,4,5,6,7,8);
	var ThrowErrorFlag = false;

	for(i = 0; i < Tobacco.length; i++)
	{
		if(Tobacco[i] == frm.elements["Tobacco"].options[frm.elements["Tobacco"].selectedIndex].value && frm.elements["Frequency"].options.selectedIndex == 0)
		{
			ThrowError("Frequency", RowName, frm);
			ThrowErrorFlag = true;
			break;
		}
	}
	if(!ThrowErrorFlag)
		removeErrorFormatting(ElmtName, RowName, frm);
}


function CheckTextArea(field, maxlen) {
	if (field.value.length > maxlen)
	{
		field.value = field.value.substring(0, maxlen);
		alert('Only 1000 characters allowed. Your input has been truncated to 1000 characters');
	}
}


//------
function ThrowError(ElmtName, RowName, frm)
{

	if(!eval("document.getElementById('" + RowName + "')"))
		return;
	applyErrorFormatting(ElmtName, RowName,frm)
	error[error.length] = RowName;
}

//------
function applyErrorFormatting(fldName, RowName,frm)
{

	tableRow = eval("document.getElementById('" + RowName + "')");
	tableRow.className = "error2";
}

//-----
function removeErrorFormatting(fldName, RowName,frm)
{
	var isSharedRow = CheckForSharedRow(RowName) // call function to handle fields that share the same row
	if(isSharedRow)
		return true;

	tableRow = eval("document.getElementById('" + RowName + "')");
	if(tableRow)
		tableRow.className = "quoter";
}


function CheckForSharedRow(RowName)
{
	for(var i=0;i<error.length;i++)
	{
		if(error[i] == RowName)
			return true;
	}
	return false;
}

function isBrowserCompatible()
{
	if(document.getElementById)
		return true;
	else
		return false;
}

function trim(str)
{
	return str.replace(/^\\s*|\\s*$/g,"");
}


//------
function OpenWindow(name,filename,height,width,parameters)
{
	var hwin = window.open(filename,name,"height=" + height + ",width=" + width + "," + parameters);

	hwin.focus();
}
//-----
function StandardPopup(pagePath)
{
	OpenWindow("", pagePath, 450, 300, "");
}
//------

Code for the form:

<form action="#" method="get" onsubmit="return ValidateQuoteRequest(this);" name="FrontPage_Form">
	

	<tr class="quoter" id="row_state">
		<td align="right" nowrap=""><a href="javascript:popUp('state')" title="">State</a></td>
		<td colspan="2">
			<select name="state" size="1" tabindex="12">
				<option value="-1">Select state...</option>
				<option value="AK">Alaska</option>
				</select>
			</td>
	</tr>
	
	<tr class="quoter" id="row_date">
		<td align="right"><a href="javascript:popUp('dob');" title="">Date of Birth</a></td>
		<td colspan="2"><select name="Month">
				<option value="-1">Month</option>
				
				<option value="01">Jan</option>
				
			</select>&nbsp;<select name="Day">
				<option value="-1">Day</option>
				
				<option value="01">01</option>
				
				
			</select>&nbsp;<select name="Year" size="1">
			<option value="-1">Year</option>
				
				<option value="1921">1921</option>
				
				
				
			</select>
			</td>
	</tr>
	<tr class="quoter" id="row_sex">
		<td align="right"><a href="javascript:popUp('gender')" title="">Gender</a></td>
		<td colspan="2"><select name="Sex" size="1">
		<option value="-1">Select...</option>
			<option value="1">Male</option>
			</select>
			</td>
	</tr>
	<tr class="quoter" id="row_Height">
		<td align="right">Height</td>
		<td nowrap="" colspan="2"><select name="Height_Feet" size="1">
				<option value="-1"></option>
				
				</select> ft&nbsp;<select name="Height_Inches" size="1">
				<option value="-1"></option>
				
				</select> in&nbsp;&nbsp;&nbsp;Weight&nbsp;<input name="Weight" size="3" maxlength="3" value=""> lbs
				</td>
	</tr>
	
	<tr class="quoter" id="row_tobacco"> 
		<td align="right"><a href="javascript:popUp('tobacco')" title="">Tobacco/ Nicotine Use</a></td>
  		<td colspan="2"><select name="Tobacco" onchange="toggleRow(this,'4,5,6,7,8','row_tobaccotype',document.FrontPage_Form.Frequency)">
				<option value="-1">Select...</option>
				<option value="1">Never used</option>
				<option value="7">Current user</option>
				</select></td>
	</tr>
	

	<tr class="quoter" style="display: none; " id="row_tobaccotype"> 
  		<td align="right">Type of Tobacco or Nicotine and frequency of use</td>
  		<td colspan="2"><select name="Frequency">
				<option value="0" selected="">Please select...</option>
				<option value="10">Cigarettes, less than 1/2 pack a day</option>
				

			</select></td>
	</tr>
	<tr class="quoter" id="row_coverage">
		<td align="right" class="quoter"><a href="javascript:popUp('calculator','https');" title="">Coverage Amount</a></td>
		<td><select name="Amount" size="1">
			
			<option value="750000">$750,000</option>
			
			
			
		</select>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:popUp('calculator');" title="" class="nav-sub" ;=""><img src="./Insurance_files/help.gif" width="16" height="17" alt="" border="0" align="bottom"></a></td><td class="quoter"><a href="javascript:popUp('calculator');" title="">How much life<br>insurance do I need?</a></td>
	</tr>
	<tr class="quoter">
		<td align="right"><a href="javascript:popUp('term');" title="">Guaranteed Term</a></td>
		<td class="quoter" colspan="2" id="ProductType"><select name="ProductType" size="1">
	
				<option value="8">10 Years</option>
				</select></td>
	</tr>
	<tr class="quoter" id="row_PreClass">
		<td align="right"><a href="javascript:popUp('healthclass');" title="">Health Class</a></td>
		<td><select name="PreClass" size="1">
				<option value="0" selected="">Best Class</option>
				<option value="2">Preferred</option>
				</select>&nbsp;<a href="javascript:popUp('healthclass');" title=""><img src="./Insurance_files/help.gif" width="16" height="17" alt="" border="0" align="bottom"></a></td>
		<td><a href="javascript:popUp('healthclass');" title="">How do I determine<br>my health class?</a><a href="#">*</a></td>
	</tr>
	
	<tr class="quoter" id="row_firstname">
		<td align="right">&nbsp;First Name</td>
		<td class="quoter" colspan="2"><input name="firstname" size="30" maxlength="50" value=""></td>
	</tr>
	<tr class="quoter" id="row_lastname">
		<td align="right">&nbsp;Last Name</td>
		<td colspan="2"><input name="lastname" size="30" maxlength="50" value=""></td>
	</tr>
	<tr class="quoter" id="row_workphone">
		<td align="right">Social Security Number</td>
		<td colspan="2">(<input maxlength="3" name="ssn1" size="3" value="">)-<input maxlength="2" name="ssn2" size="2" value="">-<input name="ssn3" size="4" maxlength="4" value=""></td>
	</tr>
	<tr class="quoter" id="row_workphone">
		<td align="right">Work Phone</td>
		<td colspan="2">(<input maxlength="3" name="workphone1" size="3" value="">)-<input maxlength="3" name="workphone2" size="3" value="">-<input name="workphone3" size="4" maxlength="4" value=""></td>
	</tr>
	<tr class="quoter" id="row_homephone">
		<td align="right">Home Phone</td>
		<td colspan="2">(<input maxlength="3" name="homephone1" size="3" value="">)-<input maxlength="3" name="homephone2" size="3" value="">-<input name="homephone3" size="4" maxlength="4" value=""></td>
	</tr>
	<tr class="quoter" id="row_email">
		<td align="right"><a href="javascript:popUp('email','https');">E-mail</a></td>
		<td colspan="2"><input name="email" size="30" maxlength="80" value=""></td>
	</tr>
	
	<tr>
		<td colspan="3" align="center" nowrap="">
		    <input type="image" title="Please click only once." name="Submit" src="./Insurance_files/compare_rates.gif" width="172" height="28" value="Compare Rates Now!" alt="Get Your Life Insurance Quote Now">
			</form>