JavaScript Form Checks - Required Text Field, Unique Values

Hi,

I need to do the following checks:

1) onsubmit - require all text boxes to be filled in
2) onsubmit - check that judge scores per judge are unique - in this example, there are 3 competitors. J1 has to issue a 1, 2, 3; J2, has to issue a 1, 2, 3 .....
3) If there is a duplicate score for J1, etc, highlight in red as score is entered (before form submitted).

Note that number of competitors and judges will vary with same field naming conventions.

Thanks!!


<html>
    
   <head>
   <script language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </script>
   </head>

    
    
    <body>

        <form method="post" action="/relpl.php">
            <table>
                
                <tr><td align="center">Competitor</td>

                    

                                 <td align="center">J1</td>
                                 <td align="center">J2</td>
                                 <td align="center">J3</td>
                                 <td align="center">J4</td>
                                 <td align="center">J5</td>
                 
                </tr>

                   <tr>
            <td><input type="textbox" size="30" name="competitor[1]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[11]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[12]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[13]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[14]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[15]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[2]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[21]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[22]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[23]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[24]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[25]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[3]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[31]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[32]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[33]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[34]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[35]" /></td>

            </tr>
</table>
<input type="hidden" name="numjudges" value="5">
<input type="hidden" name="numcompetitors" value="3">
<input type="hidden" name="show_results" value="1">
                                                                    
<input type="submit" value="Submit">
</form>


</body>
</html>

Open in new window

BrentNJAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
Note that number of competitors and judges will be limited to 9 with the upper field naming conventions.
0
ZvonkoSystems architectCommented:
Are you aware that judge[99] is highes possible field name in upper convention.
Why not this convention: judge[12][5]
0
BrentNJAuthor Commented:
Hi,

I see you point. Just didn't think judge[12][5] would work. I should be able to redo the server side scoring calculation based on the format of judge[12][5].

I tried some text field validation but not sure of it.

 function validate_form()
    {  
        valid = true;

        var arr = new Array();

        arr = document.getElementsByTagName('input');

        for(var i = 0; i < arr.length; i++)
        {
            var obj = document.getElementsByTagName('input').item(i);
          if(obj.value == '') {
          valid = false;
          }
        }
      if (valid == false) {
            alert("Please fill in all text fields");
      }
      return valid;
    }
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

ZvonkoSystems architectCommented:
Here my example:

<html>
   <head>
<title>Zvonko&#42;</title>
   <script language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }


function checkScore(theForm){
  var err = false;
  var cCnt = theForm.numcompetitors.value;
  var jCnt = theForm.numjudges.value

  for(var c=1;c<=cCnt;c++){
    var arb = [];
    for(var j=1;j<=jCnt;j++){
      var theField = theForm['judge['+c+j+']'];
      if(theField){
        var jNum = theField.value*1;
        if(jNum < 1 || jNum > jCnt){
          theField.style.backgroundColor='red';
          alert("Enter judge number.");
          theField.style.backgroundColor='';
          theField.focus();
          return false;
        }
        if(arb[jNum]){
          arb[jNum].style.backgroundColor='yellow';
          theField.style.backgroundColor='yellow';
          theField.focus();
          err = true;
        }
        arb[jNum] = theField;
      }
    }
  }
  if(err){
    alert("Doubles found.");
   
    return false;
  }
  return true;
}


      //-->
   </script>
   </head>

   
   
    <body>

        <form method="post" action="/relpl.php" onSubmit="return checkScore(this)" >
            <table>
                <tr><td align="center">Competitor</td>

                   

                                 <td align="center">J1</td>
                                 <td align="center">J2</td>
                                 <td align="center">J3</td>
                                 <td align="center">J4</td>
                                 <td align="center">J5</td>
                 
                </tr>

                   <tr>
            <td><input type="textbox" size="30" name="competitor[1]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[11]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[12]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[13]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[14]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[15]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[2]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[21]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[22]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[23]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[24]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[25]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[3]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[31]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[32]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[33]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[34]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[35]" /></td>

            </tr>
</table>
<input type="hidden" name="numjudges" value="5">
<input type="hidden" name="numcompetitors" value="3">
<input type="hidden" name="show_results" value="1">
                                                                   
<input type="submit" value="Submit">
</form>

</body>
</html>

0
BrentNJAuthor Commented:
Thanks,

regarding

2) onsubmit - check that judge scores per judge are unique - in this example, there are 3 competitors. J1 has to issue a 1, 2, 3; J2, has to issue a 1, 2, 3 .....

When I did a test, it seemed to test for unique values by row (competitor) rather than column (by judge)

Judges rank the competitors. For this example, each judge need to enter a 1, 2, and 3 since there are three competitors.

3) If there is a duplicate score for J1, etc, highlight in red as score is entered (before form submitted).

Didn't seem to work

0
ZvonkoSystems architectCommented:
You have to make it work not me. My source has enough details that you can transform it in any order you want and not to have to ask me to do it for you. Or did you not understand something in the source and are afraid to ask how it works???


<html>
   <head>
<title>Zvonko&#42;</title>
   <script language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }


function checkScore(theForm){
  var err = false;
  var cCnt = theForm.numcompetitors.value;
  var jCnt = theForm.numjudges.value

  for(var j=1;j<=jCnt;j++){
    var arb = [];
    for(var c=1;c<=cCnt;c++){
      var theField = theForm['judge['+c+j+']'];
      if(theField){
        var cNum = theField.value*1;
        if(cNum < 1 || cNum > cCnt){
          theField.style.backgroundColor='red';
          alert("Enter rank number.");
          theField.style.backgroundColor='';
          theField.focus();
          return false;
        }
        if(arb[cNum]){
          arb[cNum].style.backgroundColor='yellow';
          theField.style.backgroundColor='yellow';
          theField.focus();
          err = true;
        }
        arb[cNum] = theField;
      }
    }
  }
  if(err){
    alert("Doubles found.");
    setTimeout(resetAlert, 1700)
    return false;
  }
  return true;
}

function resetAlert(){
  theForm = document.forms[0];
  var cCnt = theForm.numcompetitors.value;
  var jCnt = theForm.numjudges.value
  for(var j=1;j<=jCnt;j++){
    for(var c=1;c<=cCnt;c++){
      theForm['judge['+c+j+']'].style.backgroundColor='';
    }
  }
}

      //-->
   </script>
   </head>

   
   
    <body>

        <form method="post" action="/relpl.php" onSubmit="return checkScore(this)" >
            <table>
                <tr><td align="center">Competitor</td>

                   

                                 <td align="center">J1</td>
                                 <td align="center">J2</td>
                                 <td align="center">J3</td>
                                 <td align="center">J4</td>
                                 <td align="center">J5</td>
                 
                </tr>

                   <tr>
            <td><input type="textbox" size="30" name="competitor[1]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[11]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[12]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[13]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[14]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[15]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[2]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[21]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[22]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[23]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[24]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[25]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[3]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[31]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[32]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[33]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[34]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[35]" /></td>

            </tr>
</table>
<input type="hidden" name="numjudges" value="5">
<input type="hidden" name="numcompetitors" value="3">
<input type="hidden" name="show_results" value="1">
                                                                   
<input type="submit" value="Submit">
</form>

</body>
</html>

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BrentNJAuthor Commented:
Thank you. I will look at your first example and ask specific questions.
0
BrentNJAuthor Commented:
And the second example. I appreciate the opportunity to learn.
0
ZvonkoSystems architectCommented:
From your question history I can see you are absolutely not a beginner. But never the less is first purpose of EE to learn from each other and not a plaice to find someone doing your job. Therefore I am pretty sure that you will manage it ;-)
0
BrentNJAuthor Commented:
Hi,

I made some changes and it mostly works. I have it set to show all errors with one alert box. Yellows are duplicates or blanks, reds are out of range.

Although the check for unique competitor names isn't working. Try to do it as an associative array similar to what you showed for the scores.

Any hints?

Thanks


<html>
   <head>
<title>Zvonko&#42;</title>
   <script language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }


function checkScore(theForm){
  var err = false;
  var cCnt = theForm.numcompetitors.value;
  var jCnt = theForm.numjudges.value

for(var c=1;c<=cCnt;c++){
    var arb = [];
      var theCompetitor = theForm['competitor['+c+']'];
      if(theCompetitor){
        var cName = theCompetitor.value;
        if(cName == ""){
          theCompetitor.style.backgroundColor='yellow';
          theCompetitor.focus();
          err = true;
        }
        else {
          theCompetitor.style.backgroundColor='';  
        }
        
        if(arb['+cName+']){
        arb[cName].style.backgroundColor='yellow';
        theCompetitor.style.backgroundColor='yellow';
        theCompetitor.focus();
        err = true;
        }
        arb['+cName+'] = theCompetitor;
      }
}

  for(var j=1;j<=jCnt;j++){
    var arb = [];
    
    for(var c=1;c<=cCnt;c++){
      var theField = theForm['judge['+c+j+']'];
      if(theField){
        var cNum = theField.value*1;
        if(cNum < 1 || cNum > cCnt){
          theField.style.backgroundColor='red';
          theField.focus();
          err = true;
        }
        else {
          theField.style.backgroundColor='';  
        }
        if(arb[cNum]){
          arb[cNum].style.backgroundColor='yellow';
          theField.style.backgroundColor='yellow';
          theField.focus();
          err = true;
        }
        arb[cNum] = theField;
      }
    }
  }
  if(err){
    alert("Please correct errors and submit again.");
    return false;
  }
  return true;
}
      //-->
   </script>
   </head>

   
   
    <body>

        <form method="post" action="/relpl.php" onSubmit="return checkScore(this)" >
            <table>
                <tr><td align="center">Competitor</td>

                   

                                 <td align="center">J1</td>
                                 <td align="center">J2</td>
                                 <td align="center">J3</td>
                                 <td align="center">J4</td>
                                 <td align="center">J5</td>
                 
                </tr>

                   <tr>
            <td><input type="textbox" size="30" name="competitor[1]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[11]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[12]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[13]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[14]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[15]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[2]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[21]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[22]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[23]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[24]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[25]" /></td>

            </tr>
            <tr>
            <td><input type="textbox" size="30" name="competitor[3]" /></td>
            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[31]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[32]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[33]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[34]" /></td>

            <td><input type="textbox" size="2" maxlength="2" onkeypress="return isNumberKey(event)" name="judge[35]" /></td>

            </tr>
</table>
<input type="hidden" name="numjudges" value="5">
<input type="hidden" name="numcompetitors" value="3">
<input type="hidden" name="show_results" value="1">
                                                                   
<input type="submit" value="Submit">
</form>

</body>
</html>

Open in new window

0
BrentNJAuthor Commented:
great help in directing solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.