Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Validation Question

Posted on 2004-08-26
4
Medium Priority
?
204 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

688 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