Validation Question

Hi

I'm trying to add more validation to some javascript that's been posted earlier.  What's needed to make sure that the project column only contains numbers.

Also, I added some code to help account for nulls that could use some double checking as I'm new to JavaScript.  The new lines are:
initValue = (inps[i].value == "" || inps[i].value == null) ? 0 : inps[i].value   //test for null value
         testValue = isNaN(parseFloat(initValue)) ? -1 : parseFloat(initValue);  //test for number

The original line is commented out above these in code below.

Thanks,
Jon

<html>
<head>
<script type="text/javascript" language="javascript">

//totals
function addRows(ndx,fldName)
{
     //total rows
    var totalResult=0;
    var testValue=0;
    var initValue="";
    var inps = document.getElementById('Project' + ndx).getElementsByTagName('input');
    var oForm = document.form1;

    var projName = 'Project' + ndx;
    var totName = 'Total' + ndx;
    for (var i = 0; i < inps.length; i++)
      if (inps[i].name != projName && inps[i].name != totName)
      {
         //testValue = isNaN(parseFloat(inps[i].value)) ? 0 : parseFloat(inps[i].value); //original line
         initValue = (inps[i].value == "" || inps[i].value == null) ? 0 : inps[i].value   //test for null value
         testValue = isNaN(parseFloat(initValue)) ? -1 : parseFloat(initValue);  //test for number
           if (testValue < 0) //test for negative number
           {
              alert("Must Be A Positive Number!");
                      inps[i].value = '';
                testValue = 0;
           }
             if (testValue > 18) //test for too many hours in one day
           {
              alert("Too Many Hours!");
                      inps[i].value = '';
                testValue = 0;
           }
           var x = testValue.toString().indexOf('.');
           if (x > 0)  //a decimal point exists
           {
                  if (testValue.toString().substr(x+1) != '5')
                        if (testValue.toString().substr(x+1) != '25')
                      if (testValue.toString().substr(x+1) != '75')
                     {
                     alert("Must Be In Quarter Hour Groupings!");
                         inps[i].value = '';
                         testValue = 0;
                     }
           }
           totalResult += testValue
      }

    document.form1['Total'+ndx].value = roundTo(totalResult, 2 );

   totalEm(oForm)

}


function totalEm(oForm)
{
     //column total
   var oForm = document.form1;
   var tot = 0;
   var cols = new Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
   var ndx = 0;

   for (var ndx = 0; ndx < cols.length; ndx++)
   {
      oForm[cols[ndx] + 'Total'].value = tot;
     for (var i = 0; i < oForm.length ; i++)
      if (oForm.elements[i].name.substr(0,3) == cols[ndx])
        tot += (1 * oForm.elements[i].value )
     oForm[cols[ndx] + 'Total'].value = tot;
     tot = 0;
   }

     //grand total
     var rTot = cTot = 0;

     for (var i = 0; i < oForm.length; i++)
     {
      var el = oForm.elements[i];


       if (el.name == 'grandTotal')
           break;
       if (el.name.substr(0,5) == 'Total')
       {
             if (isNaN(el.value))
             {
                 alert('Must be a number');
                  el.value = 0;
             }
             else
                rTot += parseFloat(el.value);
        }
       if (el.name.substr(3) == 'Total')
       {
             if (isNaN(el.value))
             {
                 alert('Must be a number');
                  el.value = 0;
             }
             else
               cTot += parseFloat(el.value)
       }
    }
     if (rTot == cTot)
      oForm.GrandTotal.value = rTot;
}


//rounding
function roundTo(num,pow){
  if(isNaN(num))
  {
    num = 0;
  }

  num *= Math.pow(10,pow);
  num = (Math.round(num)/Math.pow(10,pow))+ "" ;
  if(num.indexOf(".") == -1)
    num += "." ;
  while(num.length - num.indexOf(".") - 1 < pow)
    num += "0" ;

  return num;
}



</script>
<style type="text/css">
</style>
</head>
<body onload='totalEm(document.form1)'>
<form name='form1'>
<table>

<tr id='Project1'>
<td><p><input size=10 name=Project1 Value='123'></p></td>
<td><p><input size=20 name=Notes1 Value=''></p></td>
<td><p><input size=1  name=Mon1 Value='2' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Tue1 Value='2' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Wed1 Value='3' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Thu1 Value='2' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Fri1 Value='3' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Sat1 Value='0' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Sun1 Value='0' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Total1 Value='' readonly></p></td>
</span>
</tr>

<tr id='Project2'>
<td><p><input size=10  name=Project2 Value='456'></p></td>
<td><p><input size=20 name=Notes2 Value=''></p></td>
<td><p><input size=1  name=Mon2 Value='2' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Tue2 Value='2' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Wed2 Value='3' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Thu2 Value='2' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Fri2 Value='3' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Sat2 Value='0' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Sun2 Value='0' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Total2 Value='' readonly></p></td>
</span>
</tr>
<tr id='Project3'>
<td><p><input size=10 name=Project3 Value='789'></p></td>
<td><p><input size=20 name=Notes3 Value=''></p></td>
<td><p><input size=1  name=Mon3 Value='2' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Tue3 Value='2' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Wed3 Value='3' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Thu3 Value='2' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Fri3 Value='3' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Sat3 Value='0' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Sun3 Value='0' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Total3 Value='' readonly></p></td>
</span>
</tr>

<tr>
<td colspan='2' align="right"><p>Totals:</p></td>
<td><p><input size=1 name=MonTotal Value='' readonly</p></td>
<td><p><input size=1 name=TueTotal Value='' readonly</p></td>
<td><p><input size=1 name=WedTotal Value='' readonly</p></td>
<td><p><input size=1 name=ThuTotal Value='' readonly</p></td>
<td><p><input size=1 name=FriTotal Value='' readonly</p></td>
<td><p><input size=1 name=SatTotal Value='' readonly</p></td>
<td><p><input size=1 name=SunTotal Value='' readonly</p></td>
<td><p><input size=1 name=GrandTotal Value='' readonly></p></td>
</tr>
</table>
</form>
</body>
</html>
jonravenAsked:
Who is Participating?
 
dakydConnect With a Mentor Commented:
Actually, use this instead - I moved all of the event handlers into the script.  Basically, no more messy onBlur's all over your html.  The functionality is identical to what it was before, though, and you can even add new rows easily (just stick to the same naming convention).  Hope that helps.

<html>
<head>
<script type="text/javascript" language="javascript">

//totals
function addRows()
{
    var ndx = this.name.replace(/\D/g, "");
    var fldName = this.name;
     //total rows
    var totalResult=0;
    var testValue=0;
    var initValue="";
    var inps = document.getElementById('Project' + ndx).getElementsByTagName('input');
    var oForm = document.form1;

    var projName = 'Project' + ndx;
    var totName = 'Total' + ndx;
    for (var i = 0; i < inps.length; i++)
      if (inps[i].name != projName && inps[i].name != totName)
      {
         //testValue = isNaN(parseFloat(inps[i].value)) ? 0 : parseFloat(inps[i].value);

//original line
         initValue = (inps[i].value == "" || inps[i].value == null) ? 0 : inps[i].value   //test for null value
         testValue = isNaN(parseFloat(initValue)) ? -1 : parseFloat(initValue);  //test for number
           if (testValue < 0) //test for negative number
           {
              alert("Must Be A Positive Number!");
                      inps[i].value = '';
                testValue = 0;
           }
             if (testValue > 18) //test for too many hours in one day
           {
              alert("Too Many Hours!");
                      inps[i].value = '';
                testValue = 0;
           }
           var x = testValue.toString().indexOf('.');
           if (x > 0)  //a decimal point exists
           {
                  if (testValue.toString().substr(x+1) != '5')
                        if (testValue.toString().substr(x+1) != '25')
                      if (testValue.toString().substr(x+1) != '75')
                     {
                     alert("Must Be In Quarter Hour Groupings!");
                         inps[i].value = '';
                         testValue = 0;
                     }
           }
           totalResult += testValue
      }

    document.form1['Total'+ndx].value = roundTo(totalResult, 2 );

   totalEm(oForm)

}


function totalEm()
{
     //column total
   var tot = 0;
   var cols = new Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
   var ndx = 0;

   for (var ndx = 0; ndx < cols.length; ndx++)
   {
      oForm[cols[ndx] + 'Total'].value = tot;
     for (var i = 0; i < oForm.length ; i++)
      if (oForm.elements[i].name.substr(0,3) == cols[ndx])
        tot += (1 * oForm.elements[i].value )
     oForm[cols[ndx] + 'Total'].value = tot;
     tot = 0;
   }

     //grand total
     var rTot = cTot = 0;

     for (var i = 0; i < oForm.length; i++)
     {
      var el = oForm.elements[i];


       if (el.name == 'grandTotal')
           break;
       if (el.name.substr(0,5) == 'Total')
       {
             if (isNaN(el.value))
             {
                 alert('Must be a number');
                  el.value = 0;
             }
             else
                rTot += parseFloat(el.value);
        }
       if (el.name.substr(3) == 'Total')
       {
             if (isNaN(el.value))
             {
                 alert('Must be a number');
                  el.value = 0;
             }
             else
               cTot += parseFloat(el.value)
       }
    }
     if (rTot == cTot)
      oForm.GrandTotal.value = rTot;
}


//rounding
function roundTo(num,pow){
  if(isNaN(num))
  {
    num = 0;
  }

  num *= Math.pow(10,pow);
  num = (Math.round(num)/Math.pow(10,pow))+ "" ;
  if(num.indexOf(".") == -1)
    num += "." ;
  while(num.length - num.indexOf(".") - 1 < pow)
    num += "0" ;

  return num;
}

// only numbers for project
function checkProj()
{
  var num = this.value.replace(/Project/g,"");
  if (isNaN(num))
  {
    alert("Please enter a numeric value for " + this.name);
    this.focus();
  }
}

function init()
{
  oForm = document.form1;
  totalEm();
  var myInps = oForm.getElementsByTagName("input");
  for (var i = 0; i < myInps.length; i ++)
  {
    if (myInps[i].name.indexOf("Project") < 0 &&
        myInps[i].name.indexOf("Notes") < 0 &&
        myInps[i].name.indexOf("Total") < 0)
      myInps[i].onblur = addRows;
    else if (myInps[i].name.indexOf("Project") == 0)
      myInps[i].onblur = checkProj;
  }
}

window.onload = init;
</script>
<style type="text/css">
</style>
</head>
<body>
<form name='form1'>
<table>

<tr id='Project1'>
<td><p><input size=10 name=Project1 Value='123'></p></td>
<td><p><input size=20 name=Notes1 Value=''></p></td>
<td><p><input size=1  name=Mon1 Value='2'></p></td>
<td><p><input size=1  name=Tue1 Value='2'></p></td>
<td><p><input size=1  name=Wed1 Value='3'></p></td>
<td><p><input size=1  name=Thu1 Value='2'></p></td>
<td><p><input size=1  name=Fri1 Value='3'></p></td>
<td><p><input size=1  name=Sat1 Value='0'></p></td>
<td><p><input size=1  name=Sun1 Value='0'></p></td>
<td><p><input size=1  name=Total1 Value='' readonly></p></td>
</span>
</tr>

<tr id='Project2'>
<td><p><input size=10  name=Project2 Value='456'></p></td>
<td><p><input size=20 name=Notes2 Value=''></p></td>
<td><p><input size=1  name=Mon2 Value='2'></p></td>
<td><p><input size=1  name=Tue2 Value='2'></p></td>
<td><p><input size=1  name=Wed2 Value='3'></p></td>
<td><p><input size=1  name=Thu2 Value='2'></p></td>
<td><p><input size=1  name=Fri2 Value='3'></p></td>
<td><p><input size=1  name=Sat2 Value='0'></p></td>
<td><p><input size=1  name=Sun2 Value='0'></p></td>
<td><p><input size=1  name=Total2 Value='' readonly></p></td>
</span>
</tr>
<tr id='Project3'>
<td><p><input size=10 name=Project3 Value='789'></p></td>
<td><p><input size=20 name=Notes3 Value=''></p></td>
<td><p><input size=1  name=Mon3 Value='2'></p></td>
<td><p><input size=1  name=Tue3 Value='2'></p></td>
<td><p><input size=1  name=Wed3 Value='3'></p></td>
<td><p><input size=1  name=Thu3 Value='2'></p></td>
<td><p><input size=1  name=Fri3 Value='3'></p></td>
<td><p><input size=1  name=Sat3 Value='0'></p></td>
<td><p><input size=1  name=Sun3 Value='0'></p></td>
<td><p><input size=1  name=Total3 Value='' readonly></p></td>
</span>
</tr>

<tr>
<td colspan='2' align="right"><p>Totals:</p></td>
<td><p><input size=1 name=MonTotal Value='' readonly</p></td>
<td><p><input size=1 name=TueTotal Value='' readonly</p></td>
<td><p><input size=1 name=WedTotal Value='' readonly</p></td>
<td><p><input size=1 name=ThuTotal Value='' readonly</p></td>
<td><p><input size=1 name=FriTotal Value='' readonly</p></td>
<td><p><input size=1 name=SatTotal Value='' readonly</p></td>
<td><p><input size=1 name=SunTotal Value='' readonly</p></td>
<td><p><input size=1 name=GrandTotal Value='' readonly></p></td>
</tr>
</table>
</form>
</body>
</html>
0
 
dakydCommented:
Will this work for you? It checks the value for the project num and throws an alert if it finds a non-numeric value.  Hope that helps.

<html>
<head>
<script type="text/javascript" language="javascript">

//totals
function addRows(ndx,fldName)
{
     //total rows
    var totalResult=0;
    var testValue=0;
    var initValue="";
    var inps = document.getElementById('Project' + ndx).getElementsByTagName('input');
    var oForm = document.form1;

    var projName = 'Project' + ndx;
    var totName = 'Total' + ndx;
    for (var i = 0; i < inps.length; i++)
      if (inps[i].name != projName && inps[i].name != totName)
      {
         //testValue = isNaN(parseFloat(inps[i].value)) ? 0 : parseFloat(inps[i].value);

//original line
         initValue = (inps[i].value == "" || inps[i].value == null) ? 0 : inps[i].value   //test

for null value
         testValue = isNaN(parseFloat(initValue)) ? -1 : parseFloat(initValue);  //test for

number
           if (testValue < 0) //test for negative number
           {
              alert("Must Be A Positive Number!");
                      inps[i].value = '';
                testValue = 0;
           }
             if (testValue > 18) //test for too many hours in one day
           {
              alert("Too Many Hours!");
                      inps[i].value = '';
                testValue = 0;
           }
           var x = testValue.toString().indexOf('.');
           if (x > 0)  //a decimal point exists
           {
                  if (testValue.toString().substr(x+1) != '5')
                        if (testValue.toString().substr(x+1) != '25')
                      if (testValue.toString().substr(x+1) != '75')
                     {
                     alert("Must Be In Quarter Hour Groupings!");
                         inps[i].value = '';
                         testValue = 0;
                     }
           }
           totalResult += testValue
      }

    document.form1['Total'+ndx].value = roundTo(totalResult, 2 );

   totalEm(oForm)

}


function totalEm(oForm)
{
     //column total
   var oForm = document.form1;
   var tot = 0;
   var cols = new Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
   var ndx = 0;

   for (var ndx = 0; ndx < cols.length; ndx++)
   {
      oForm[cols[ndx] + 'Total'].value = tot;
     for (var i = 0; i < oForm.length ; i++)
      if (oForm.elements[i].name.substr(0,3) == cols[ndx])
        tot += (1 * oForm.elements[i].value )
     oForm[cols[ndx] + 'Total'].value = tot;
     tot = 0;
   }

     //grand total
     var rTot = cTot = 0;

     for (var i = 0; i < oForm.length; i++)
     {
      var el = oForm.elements[i];


       if (el.name == 'grandTotal')
           break;
       if (el.name.substr(0,5) == 'Total')
       {
             if (isNaN(el.value))
             {
                 alert('Must be a number');
                  el.value = 0;
             }
             else
                rTot += parseFloat(el.value);
        }
       if (el.name.substr(3) == 'Total')
       {
             if (isNaN(el.value))
             {
                 alert('Must be a number');
                  el.value = 0;
             }
             else
               cTot += parseFloat(el.value)
       }
    }
     if (rTot == cTot)
      oForm.GrandTotal.value = rTot;
}


//rounding
function roundTo(num,pow){
  if(isNaN(num))
  {
    num = 0;
  }

  num *= Math.pow(10,pow);
  num = (Math.round(num)/Math.pow(10,pow))+ "" ;
  if(num.indexOf(".") == -1)
    num += "." ;
  while(num.length - num.indexOf(".") - 1 < pow)
    num += "0" ;

  return num;
}

// only numbers for project
function checkProj(obj)
{
  var num = obj.value.replace(/Project/g,"");
  if (isNaN(num))
  {
    alert("Please enter a numeric value for " + obj.name);
    obj.focus();
  }
}

</script>
<style type="text/css">
</style>
</head>
<body onload='totalEm(document.form1)'>
<form name='form1'>
<table>

<tr id='Project1'>
<td><p><input size=10 name=Project1 Value='123' onblur="checkProj(this)"></p></td>
<td><p><input size=20 name=Notes1 Value=''></p></td>
<td><p><input size=1  name=Mon1 Value='2' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Tue1 Value='2' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Wed1 Value='3' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Thu1 Value='2' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Fri1 Value='3' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Sat1 Value='0' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Sun1 Value='0' onblur=addRows(1,this.name)></p></td>
<td><p><input size=1  name=Total1 Value='' readonly></p></td>
</span>
</tr>

<tr id='Project2'>
<td><p><input size=10  name=Project2 Value='456' onblur="checkProj(this)"></p></td>
<td><p><input size=20 name=Notes2 Value=''></p></td>
<td><p><input size=1  name=Mon2 Value='2' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Tue2 Value='2' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Wed2 Value='3' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Thu2 Value='2' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Fri2 Value='3' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Sat2 Value='0' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Sun2 Value='0' onblur=addRows(2,this.name)></p></td>
<td><p><input size=1  name=Total2 Value='' readonly></p></td>
</span>
</tr>
<tr id='Project3'>
<td><p><input size=10 name=Project3 Value='789' onblur="checkProj(this)"></p></td>
<td><p><input size=20 name=Notes3 Value=''></p></td>
<td><p><input size=1  name=Mon3 Value='2' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Tue3 Value='2' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Wed3 Value='3' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Thu3 Value='2' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Fri3 Value='3' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Sat3 Value='0' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Sun3 Value='0' onblur=addRows(3,this.name)></p></td>
<td><p><input size=1  name=Total3 Value='' readonly></p></td>
</span>
</tr>

<tr>
<td colspan='2' align="right"><p>Totals:</p></td>
<td><p><input size=1 name=MonTotal Value='' readonly</p></td>
<td><p><input size=1 name=TueTotal Value='' readonly</p></td>
<td><p><input size=1 name=WedTotal Value='' readonly</p></td>
<td><p><input size=1 name=ThuTotal Value='' readonly</p></td>
<td><p><input size=1 name=FriTotal Value='' readonly</p></td>
<td><p><input size=1 name=SatTotal Value='' readonly</p></td>
<td><p><input size=1 name=SunTotal Value='' readonly</p></td>
<td><p><input size=1 name=GrandTotal Value='' readonly></p></td>
</tr>
</table>
</form>
</body>
</html>
0
 
jonravenAuthor Commented:
Ooooo .... very nice!!  Thank you very much!!

Jon
0
 
dakydCommented:
You're welcome, glad you got what you wanted.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.