...

View Full Version : JavaScript Form Validation



luckysarea
10-06-2011, 09:24 PM
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. :confused:
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum