SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JavaScript Form Validation

    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

    Code:
    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:

    Code:
    <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>
    Attached Files Attached Files


Tags for this Thread

Bookmarks

Posting Permissions

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