Solved

Validation Question

Posted on 2004-08-26
4
192 Views
Last Modified: 2012-06-22
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>
0
Comment
Question by:jonraven
  • 3
4 Comments
 
LVL 19

Expert Comment

by:dakyd
ID: 11907972
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
 
LVL 19

Accepted Solution

by:
dakyd earned 125 total points
ID: 11908335
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
 

Author Comment

by:jonraven
ID: 11916112
Ooooo .... very nice!!  Thank you very much!!

Jon
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11916291
You're welcome, glad you got what you wanted.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now