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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ZvonkoConnect With a Mentor Systems 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
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
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
 
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
All Courses

From novice to tech pro — start learning today.