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

Code: Select all

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: Select all

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