Link to home
Start Free TrialLog in
Avatar of Jarvis1
Jarvis1

asked on

Web Page Form Validation

Help I need to finish up some web form validation but need a little help. Below are my problems as well as my code. I need some responses as soon as possible.

1) I need the Submit button not to allowed a form submit withoutm all fields being entered
2) I need The Vacation Hours Due field to only allow 0 to 160 hours entered
3) When entering the “Official Termination Date” I want the field to not allow a person to enter a date  before the Last Day the Employee Worked or Will Work.  I  need to code this so the Official Termination Date must be equal to or later than then the Last Day the Employee Worked or Will Work date.  

<%
strempeeid = Request.QueryString("employeeeeid")
      
Set objRS = Server.CreateObject("ADODB.Recordset")
strquery = "SELECT * FROM vw_termpageinfo (nolock) where empid='" & strempeeid & "' and EmpStatus in ('A','L')"
objRS.Open strQuery,strConnectFtnWeb,adLockReadOnly,adCmdTable

Set objRS2 = Server.CreateObject("ADODB.Recordset")
strquery2 = "SELECT * FROM vw_termreason (nolock) "
objRS2.Open strQuery2,strConnectFtnWeb,adLockReadOnly,adCmdTable
%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Employee Termination</title>
<LINK REL=stylesheet TYPE="text/css" HREF="/www/StyleSheets/USStyles.css" TITLE="style">


<SCRIPT>
function validate()
{
     mNv=document.form1.lastdayworked.value;
     if (mNv=='') {
          alert('The last day terminated employee worked is required. Please try again.');
          return false;
     }
     mNv=document.form1.officialtermdate.value;
     if (mNv=='') {
          alert('The official termination date is required. Please try again.');
          return false;
     }
     if (!(document.form1.withorwithout[0].checked || document.form1.withorwithout[1].checked)) {
          alert('You must state if the employee termined with or without a 2 weeks notice. Please try again.');
          return false;
     }

     var acceptLength = 2;
     var input = document.form1.vacationhours.value;
     if (isNaN(input) || input == "")
     {
           alert("vacationhours is invalid number. Please try again.");
           document.form1.vacationhours.focus();
           return false;
      }
      else
     {
      // if the number is interger then add point after the interger number.
          if (input.indexOf('.') == -1)
          {
                input += ".";
          }
          restText = input.substring(input.indexOf('.')+1, input.length);
         
          if (restText.length > acceptLength)
          {
               alert ("Only " + acceptLength + " decimal places will be accepted when enetering vaction. Please try again.");
               document.form1.vacationhours.focus();<br>
               return false;
          }
      }
     
      if (!(document.form1.rehire[0].checked || document.form1.rehire[1].checked)) {
          alert("You must state if the employee is eligible for rehire. Please try again.");
          return false;
      }
      return true;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkNumeric(objName,minval, maxval,comma,period,hyphen)
{
      var numberfield = objName;
      if (chkNumeric(objName,minval,maxval,comma,period,hyphen) == false)
      {
            numberfield.select();
            numberfield.focus();
            return false;
      }
      else
      {
            return true;
      }
}

function chkNumeric(objName,minval,maxval,comma,period,hyphen)
{
// only allow 0-9 be entered, plus any values passed
// (can be in any order, and don't have to be comma, period, or hyphen)
// if all numbers allow commas, periods, hyphens or whatever,
// just hard code it here and take out the passed parameters
var checkOK = "0123456789" + comma + period + hyphen;
var checkStr = objName;
var allValid = true;
var decPoints = 0;
var allNum = "";

for (i = 0;  i < checkStr.value.length;  i++)
{
ch = checkStr.value.charAt(i);
for (j = 0;  j < checkOK.length;  j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{      
alertsay = "Please enter only numeric values without decimals like"
alertsay = alertsay + checkOK + "\" in the \"" + checkStr.name + "\" field."
alert(alertsay);
return (false);
}

// set the minimum and maximum
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= minval && prsVal <= maxval))
{
alertsay = "Please enter a value greater than or "
alertsay = alertsay + "equal to \"" + minval + "\" and less than or "
alertsay = alertsay + "equal to \"" + maxval + "\" in the \"" + checkStr.name + "\" field."
alert(alertsay);
return (false);
}
}
//  End -->
</script>


<!-- American format mm/dd/yyyy -->
<script language="JavaScript" src="calendar2.js"></script><!-- Date only with year scrolling -->


</head>

<body>

  <table Class="PageNote" border="0" cellpadding="2" cellspacing="2"  width="100%" bgcolor="FAF0C8" bordercolor="FFCC00" align=center>
      <tr>
        <td valign="middle">
            <p>Employee Termination Form. This form will allow you to terminate and employee from the company. While this form does not complete the termination it starts the process and files the appropriate information. This information will be treated as confidential and only the ESRM and Payroll department will be given access to this information.
            </p>
            <p>If you have any questions or concerns, contact the Total Compensation Service Center at (800) 407-6288 or e-mail totalcomp@firsthorizon.com.
            </p>
            </td>
         </tr>
      </table>


      <table width="100%"  border="0" cellspacing="2" cellpadding="2">
        <tr class="ColumnHeader">
       <td bgcolor="cccccc" valign=top nowrap>
       <font face="Arial" size="2" color="Black"><strong><center>Employee Termination Form</center></strong></font>
       </td>
      </tr>
      </table>

<form name="form1" method="post" action="/www/downloads/ftn/TermPage/termpageprocess.asp" onsubmit="return validate();">
  <table width="100%"  border="0" cellspacing="2" cellpadding="2">
    <tr valign="top">
      <td width="28%">Employee Name: </td>
      <td width="72%"><input disabled type="text" name="Employeename2" value= "<% = objRS("Employeename2")%>">
                  <input type="hidden" name="Employeename2" value= "<% = objRS("Employeename2")%>"></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Employee Number: </td>
      <td><input disabled type="text" name="EmployeeNo" value= "<% =objRS("EmployeeNo") %>">
        <input type="hidden" name="EmployeeNo" value= "<% =objRS("EmployeeNo") %>"></td>
    </tr>
    <tr valign="top">
      <td>Employee's Work State <span class="style1">(RCLO Code) : </span></td>
      <td><input disabled type="text" name="RCLOCode" value= "<% =objRS("RCLOCode")%>">
        <input type="hidden" name="RCLOCode" value= "<% =objRS("RCLOCode")%>"></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Last Day Employee Worked or Will Work: </td>
      <td><input type="text" name="lastdayworked" readonly><a href="javascript:cal5.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a> <I><font color=000000>Please click calendar to enter date</font></i></td>
    </tr>
    <tr valign="top">
      <td>Official Termination Date: </td>
      <td><input type="text" name="officialtermdate" readonly><a href="javascript:cal6.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a> <I><font color=000000>Please click calendar to enter date</font></i></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Termination Reason: </td>
      <td><select name="termreason">
                 <option value=All>All</option>
                          <%objRS2.MoveFirst
                                          do while not objRS2.EOF%>
                   <option value="<%=objRS2("termreason")%>"><%=objRS2("termreason")%></option>
                                                                          <%objRS2.MoveNext
                                                                                 Loop%>      
      </select></td>
    </tr>
    <tr valign="top">
      <td>Terminated with or without 2 weeks notice: </td>
      <td><input name="withorwithout" type="radio" value="with">
        With
        <input name="withorwithout" type="radio" value="without 2 weeks norice">
        Without </td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Severance weeks due: </td>
      <td><input type="text" name="severanceweeks" onBlur="checkNumeric(this,0,20,'','','');"></td>
    </tr>
    <tr valign="top">
      <td>Vacation hours due: </td>
      <td><input type="text" name="vacationhours"></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Eligible for rehire: </td>
      <td><input name="rehire" type="radio" value="yes">
        Yes
        <input name="rehire" type="radio" value="no">
      No</td>
    </tr>
    <tr valign="top">
      <td><input type="submit" name="Submit" value="Submit">
      <input type="reset" name="Reset" value="Reset">
      <input type="hidden" name="Leader" value= "<% = objRS("Leader")%>">
      <input type="hidden" name="LeaderEmail" value= "<% = objRS("LeaderEmail")%>">
      </td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

<script language="JavaScript">
                  <!-- // create calendar object(s) just after form tag closed
                         // specify form element as the only parameter (document.forms['formname'].elements['input']);
                         // note: you can have as many calendar objects as you need for your application
      
                        var cal5 = new calendar2(document.forms['form1'].elements['lastdayworked']);
                        cal5.year_scroll = true;
                        cal5.time_comp = false;
                        var cal6 = new calendar2(document.forms['form1'].elements['officialtermdate']);
                        cal6.year_scroll = true;
                        cal6.time_comp = false;
                  //-->
                  </script>
</body>
</html>
<%
   objRS.close ()
   set objRS = Nothing
   objRS2.close ()
   set objRS2 = Nothing
%>
Avatar of jrram
jrram
Flag of United States of America image
1) I need the Submit button not to allowed a form submit withoutm all fields being entered

>> As long as you return (false) everytime something fails in your validation, the form should never be submitted for processing

2) I need The Vacation Hours Due field to only allow 0 to 160 hours entered

>>

If ((parseFloat(vacationhours) < 0.0) || (parseFloat(vacationhours) > 160.0))
{
alert ('Invalid vacation hours');
return false;
}

3)
Avatar of jrram
jrram
Flag of United States of America image
3) When entering the “Official Termination Date” I want the field to not allow a person to enter a date  before the Last Day the Employee Worked or Will Work.  I  need to code this so the Official Termination Date must be equal to or later than then the Last Day the Employee Worked or Will Work date.

lastdayworkdate = new Date(document.Last Day the Employee Worked.value)
willworkdate = new Date(document.Will Work.value)

termdate = new Date(document.Official Termination.value)

if ((termdate < lastdayworkdate) || (termdate < willworkdate))
{
alert('Official Termination date invalid');
return false;
}
Avatar of Jarvis1
Jarvis1

ASKER

Thanks, Ca you insert the fixes in my code above.
Avatar of Jarvis1
Jarvis1

ASKER

Thanks, Can you insert the fixes in my java code.
<SCRIPT>
function validate()
{
     mNv=document.form1.lastdayworked.value;
     if (mNv=='') {
          alert('The last day terminated employee worked is required. Please try again.');
          return false;
     }
     mNv=document.form1.officialtermdate.value;
     if (mNv=='') {
          alert('The official termination date is required. Please try again.');
          return false;
     }
     if (!(document.form1.withorwithout[0].checked || document.form1.withorwithout[1].checked)) {
          alert('You must state if the employee termined with or without a 2 weeks notice. Please try again.');
          return false;
     }

     var acceptLength = 2;
     var input = document.form1.vacationhours.value;
     if (isNaN(input) || input == "")
     {
           alert("vacationhours is invalid number. Please try again.");
           document.form1.vacationhours.focus();
           return false;
      }
      else
     {
      // if the number is interger then add point after the interger number.
          if (input.indexOf('.') == -1)
          {
                input += ".";
          }
          restText = input.substring(input.indexOf('.')+1, input.length);
         
          if (restText.length > acceptLength)
          {
               alert ("Only " + acceptLength + " decimal places will be accepted when enetering vaction. Please try again.");
               document.form1.vacationhours.focus();<br>
               return false;
          }
      }
     
      if (!(document.form1.rehire[0].checked || document.form1.rehire[1].checked)) {
          alert("You must state if the employee is eligible for rehire. Please try again.");
          return false;
      }
      return true;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkNumeric(objName,minval, maxval,comma,period,hyphen)
{
     var numberfield = objName;
     if (chkNumeric(objName,minval,maxval,comma,period,hyphen) == false)
     {
          numberfield.select();
          numberfield.focus();
          return false;
     }
     else
     {
          return true;
     }
}

function chkNumeric(objName,minval,maxval,comma,period,hyphen)
{
// only allow 0-9 be entered, plus any values passed
// (can be in any order, and don't have to be comma, period, or hyphen)
// if all numbers allow commas, periods, hyphens or whatever,
// just hard code it here and take out the passed parameters
var checkOK = "0123456789" + comma + period + hyphen;
var checkStr = objName;
var allValid = true;
var decPoints = 0;
var allNum = "";

for (i = 0;  i < checkStr.value.length;  i++)
{
ch = checkStr.value.charAt(i);
for (j = 0;  j < checkOK.length;  j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{    
alertsay = "Please enter only numeric values without decimals like"
alertsay = alertsay + checkOK + "\" in the \"" + checkStr.name + "\" field."
alert(alertsay);
return (false);
}

// set the minimum and maximum
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= minval && prsVal <= maxval))
{
alertsay = "Please enter a value greater than or "
alertsay = alertsay + "equal to \"" + minval + "\" and less than or "
alertsay = alertsay + "equal to \"" + maxval + "\" in the \"" + checkStr.name + "\" field."
alert(alertsay);
return (false);
}
}
//  End -->
</script>
ASKER CERTIFIED SOLUTION
Avatar of jrram
jrram
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Jarvis1
Jarvis1

ASKER

Jrram here you go

<%
strempeeid = Request.QueryString("employeeeeid")
     
Set objRS = Server.CreateObject("ADODB.Recordset")
strquery = "SELECT * FROM vw_termpageinfo (nolock) where empid='" & strempeeid & "' and EmpStatus in ('A','L')"
objRS.Open strQuery,strConnectFtnWeb,adLockReadOnly,adCmdTable

Set objRS2 = Server.CreateObject("ADODB.Recordset")
strquery2 = "SELECT * FROM vw_termreason (nolock) "
objRS2.Open strQuery2,strConnectFtnWeb,adLockReadOnly,adCmdTable
%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Employee Termination</title>
<LINK REL=stylesheet TYPE="text/css" HREF="/www/StyleSheets/USStyles.css" TITLE="style">


<SCRIPT>
function validate()
{
     mNv=document.form1.lastdayworked.value;
     if (mNv=='') {
          alert('The last day terminated employee worked is required. Please try again.');
          return false;
     }
     mNv=document.form1.officialtermdate.value;
     if (mNv=='') {
          alert('The official termination date is required. Please try again.');
          return false;
     }
     if (!(document.form1.withorwithout[0].checked || document.form1.withorwithout[1].checked)) {
          alert('You must state if the employee termined with or without a 2 weeks notice. Please try again.');
          return false;
     }

     var acceptLength = 2;
     var input = document.form1.vacationhours.value;
     if (isNaN(input) || input == "")
     {
           alert("vacationhours is invalid number. Please try again.");
           document.form1.vacationhours.focus();
           return false;
      }
      else
     {
      // if the number is interger then add point after the interger number.
          if (input.indexOf('.') == -1)
          {
                input += ".";
          }
          restText = input.substring(input.indexOf('.')+1, input.length);
         
          if (restText.length > acceptLength)
          {
               alert ("Only " + acceptLength + " decimal places will be accepted when enetering vaction. Please try again.");
               document.form1.vacationhours.focus();<br>
               return false;
          }
      }
     
      if (!(document.form1.rehire[0].checked || document.form1.rehire[1].checked)) {
          alert("You must state if the employee is eligible for rehire. Please try again.");
          return false;
      }
      return true;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkNumeric(objName,minval, maxval,comma,period,hyphen)
{
     var numberfield = objName;
     if (chkNumeric(objName,minval,maxval,comma,period,hyphen) == false)
     {
          numberfield.select();
          numberfield.focus();
          return false;
     }
     else
     {
          return true;
     }
}

function chkNumeric(objName,minval,maxval,comma,period,hyphen)
{
// only allow 0-9 be entered, plus any values passed
// (can be in any order, and don't have to be comma, period, or hyphen)
// if all numbers allow commas, periods, hyphens or whatever,
// just hard code it here and take out the passed parameters
var checkOK = "0123456789" + comma + period + hyphen;
var checkStr = objName;
var allValid = true;
var decPoints = 0;
var allNum = "";

for (i = 0;  i < checkStr.value.length;  i++)
{
ch = checkStr.value.charAt(i);
for (j = 0;  j < checkOK.length;  j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{    
alertsay = "Please enter only numeric values without decimals like"
alertsay = alertsay + checkOK + "\" in the \"" + checkStr.name + "\" field."
alert(alertsay);
return (false);
}

// set the minimum and maximum
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= minval && prsVal <= maxval))
{
alertsay = "Please enter a value greater than or "
alertsay = alertsay + "equal to \"" + minval + "\" and less than or "
alertsay = alertsay + "equal to \"" + maxval + "\" in the \"" + checkStr.name + "\" field."
alert(alertsay);
return (false);
}
}
//  End -->
</script>


<!-- American format mm/dd/yyyy -->
<script language="JavaScript" src="calendar2.js"></script><!-- Date only with year scrolling -->


</head>

<body>

  <table Class="PageNote" border="0" cellpadding="2" cellspacing="2"  width="100%" bgcolor="FAF0C8" bordercolor="FFCC00" align=center>
     <tr>
       <td valign="middle">
          <p>Employee Termination Form. This form will allow you to terminate and employee from the company. While this form does not complete the termination it starts the process and files the appropriate information. This information will be treated as confidential and only the ESRM and Payroll department will be given access to this information.
          </p>
          <p>If you have any questions or concerns, contact the Total Compensation Service Center at (800) 407-6288 or e-mail totalcomp@firsthorizon.com.
          </p>
          </td>
        </tr>
     </table>


     <table width="100%"  border="0" cellspacing="2" cellpadding="2">
       <tr class="ColumnHeader">
      <td bgcolor="cccccc" valign=top nowrap>
      <font face="Arial" size="2" color="Black"><strong><center>Employee Termination Form</center></strong></font>
      </td>
     </tr>
     </table>

<form name="form1" method="post" action="/www/downloads/ftn/TermPage/termpageprocess.asp" onsubmit="return validate();">
  <table width="100%"  border="0" cellspacing="2" cellpadding="2">
    <tr valign="top">
      <td width="28%">Employee Name: </td>
      <td width="72%"><input disabled type="text" name="Employeename2" value= "<% = objRS("Employeename2")%>">
                <input type="hidden" name="Employeename2" value= "<% = objRS("Employeename2")%>"></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Employee Number: </td>
      <td><input disabled type="text" name="EmployeeNo" value= "<% =objRS("EmployeeNo") %>">
       <input type="hidden" name="EmployeeNo" value= "<% =objRS("EmployeeNo") %>"></td>
    </tr>
    <tr valign="top">
      <td>Employee's Work State <span class="style1">(RCLO Code) : </span></td>
      <td><input disabled type="text" name="RCLOCode" value= "<% =objRS("RCLOCode")%>">
       <input type="hidden" name="RCLOCode" value= "<% =objRS("RCLOCode")%>"></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Last Day Employee Worked or Will Work: </td>
      <td><input type="text" name="lastdayworked" readonly><a href="javascript:cal5.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a> <I><font color=000000>Please click calendar to enter date</font></i></td>
    </tr>
    <tr valign="top">
      <td>Official Termination Date: </td>
      <td><input type="text" name="officialtermdate" readonly><a href="javascript:cal6.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a> <I><font color=000000>Please click calendar to enter date</font></i></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Termination Reason: </td>
      <td><select name="termreason">
                 <option value=All>All</option>
                          <%objRS2.MoveFirst
                                          do while not objRS2.EOF%>
                   <option value="<%=objRS2("termreason")%>"><%=objRS2("termreason")%></option>
                                                                       <%objRS2.MoveNext
                                                                            Loop%>      
      </select></td>
    </tr>
    <tr valign="top">
      <td>Terminated with or without 2 weeks notice: </td>
      <td><input name="withorwithout" type="radio" value="with">
        With
        <input name="withorwithout" type="radio" value="without 2 weeks norice">
        Without </td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Severance weeks due: </td>
      <td><input type="text" name="severanceweeks" onBlur="checkNumeric(this,0,20,'','','');"></td>
    </tr>
    <tr valign="top">
      <td>Vacation hours due: </td>
      <td><input type="text" name="vacationhours"></td>
    </tr>
    <tr valign="top" bgcolor="#CCCCCC">
      <td>Eligible for rehire: </td>
      <td><input name="rehire" type="radio" value="yes">
        Yes
        <input name="rehire" type="radio" value="no">
      No</td>
    </tr>
    <tr valign="top">
      <td><input type="submit" name="Submit" value="Submit">
      <input type="reset" name="Reset" value="Reset">
     <input type="hidden" name="Leader" value= "<% = objRS("Leader")%>">
     <input type="hidden" name="LeaderEmail" value= "<% = objRS("LeaderEmail")%>">
     </td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

<script language="JavaScript">
               <!-- // create calendar object(s) just after form tag closed
                     // specify form element as the only parameter (document.forms['formname'].elements['input']);
                     // note: you can have as many calendar objects as you need for your application
     
                    var cal5 = new calendar2(document.forms['form1'].elements['lastdayworked']);
                    cal5.year_scroll = true;
                    cal5.time_comp = false;
                    var cal6 = new calendar2(document.forms['form1'].elements['officialtermdate']);
                    cal6.year_scroll = true;
                    cal6.time_comp = false;
               //-->
               </script>
</body>
</html>
<%
   objRS.close ()
   set objRS = Nothing
   objRS2.close ()
   set objRS2 = Nothing
%>