Simple Form Checkbox Validation

Hi All,

I've almost got all my onSubmit validation worked out for my form but I am struggling with checkboxes and how their validation works.

I want to make it so that the visitor has to select at least one of the checkboxes (for a time to call) and ANY of the checkboxes which he/she selects, they should then have to select a best number to call on from the <select> next to the checkbox. However, if they don't tick a specific one of the checkboxes then they do not have to select anything in the <select>.

So the validation should work out, first if at least one checkbox has been selected and then for each one which as been selected that a value which is not "" has been selected for each appropriate <select>

Here is the part of the form that i am having trouble with:

<table border="0" cellspacing="2" cellpadding="0" style="margin-top: -3px; ">
  <tr>
      <td class="timeslot">8am - 11am</td>
      <td><input class="radioinput" name="timetocall" type="checkbox" value="8am-11am">

at
<select name="numbertocall~8am-11am">
      <option value="" selected></option>
      <option value="Home">Home</option>
      <option value="Work">Work</option>
      <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
      <td class="timeslot">11am - 2pm</td>
      <td><input class="radioinput" name="timetocall" type="checkbox" value="11am-2pm">

at
<select name="numbertocall~11am-2pm">
      <option value="" selected></option>
      <option value="Home">Home</option>
      <option value="Work">Work</option>
      <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
      <td class="timeslot">2pm - 5pm</td>
      <td><input class="radioinput" name="timetocall" type="checkbox" value="2pm-5pm">

at
<select name="numbertocall~2pm-5pm">
      <option value="" selected></option>
      <option value="Home">Home</option>
      <option value="Work">Work</option>
      <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
      <td class="timeslot">5pm - 8pm</td>
      <td><input class="radioinput" name="timetocall" type="checkbox" value="5pm-8pm">

at
<select name="numbertocall~5pm-8pm">
      <option value="" selected></option>
      <option value="Home">Home</option>
      <option value="Work">Work</option>
      <option value="Mobile">Mobile</option>
</select></td>
  </tr>
</table>

Thanks very much for reading my question.

Brad
bradderickAsked:
Who is Participating?
 
RozanaZConnect With a Mentor Commented:
Hi,
In this example I validate only those checkboxes which name starts with 'timetocall' and
select tags with names start with 'numbertocall'
It this closer to solution you are looking for?


<HTML>
<HEAD>
<TITLE></TITLE>
<script>
     function test()
     {
          hasSelected = false;
          allElements = document.forms[0].elements;
          for (i = 0; i < allElements.length; i++)
          {
               if(allElements[i].type == "checkbox" && allElements[i].name == "timetocall")
               {                    
                    if(allElements[i].checked == true)
                    {
                         hasSelected = true;
                         checkObjValue = allElements[i].value;
                         for (j = 0; j < allElements.length; j++)
                         {
                              if(allElements[j].type == "select-one" && allElements[j].name.indexOf("numbertocall") != -1)
                              {
                                   if(allElements[j].name.indexOf(checkObjValue) != -1 && allElements[j].selectedIndex == 0)
                                   {
                                        alert("Select target");
                                        allElements[j].focus();
                                        return false;
                                   }
                              }
                         }
                    }
               }
          }
          if(hasSelected)
          {
               return true;
          }
          else
          {
               alert("Nothing selected");
               return false;
          }
     }
     
</script>
</HEAD>
<BODY>
<form>
<table border="0" cellspacing="2" cellpadding="0" style="margin-top: -3px; ">
  <tr>
     <td class="timeslot">8am - 11am</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="8am-11am">

at
<select name="numbertocall~8am-11am">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
     <td class="timeslot">11am - 2pm</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="11am-2pm">

at
<select name="numbertocall~11am-2pm">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
     <td class="timeslot">2pm - 5pm</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="2pm-5pm">

at
<select name="numbertocall~2pm-5pm">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
     <td class="timeslot">5pm - 8pm</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="5pm-8pm">

at
<select name="numbertocall~5pm-8pm">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
</table>
<br>
<input type="button" onClick="javascript: test()" value="Validate">
</form>

</BODY>
</HTML>
0
 
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
      function test()
      {
            hasSelected = false;
            allElements = document.forms[0].elements;
            for (i = 0; i < allElements.length; i++)
            {
                  if(allElements[i].type == "checkbox")
                  {                        
                        if(allElements[i].checked == true)
                        {
                              hasSelected = true;
                              checkObjValue = allElements[i].value;
                              for (j = 0; j < allElements.length; j++)
                              {
                                    if(allElements[j].type == "select-one")
                                    {
                                          if(allElements[j].name.indexOf(checkObjValue) != -1 && allElements[j].selectedIndex == 0)
                                          {
                                                alert("Select target");
                                                allElements[j].focus();
                                                return false;
                                          }
                                    }
                              }
                        }
                  }
            }
            if(hasSelected)
            {
                  return true;
            }
            else
            {
                  alert("Nothing selected");
                  return false;
            }
      }
      
</script>
</HEAD>
<BODY>
<form>
<table border="0" cellspacing="2" cellpadding="0" style="margin-top: -3px; ">
  <tr>
     <td class="timeslot">8am - 11am</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="8am-11am">

at
<select name="numbertocall~8am-11am">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
     <td class="timeslot">11am - 2pm</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="11am-2pm">

at
<select name="numbertocall~11am-2pm">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
     <td class="timeslot">2pm - 5pm</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="2pm-5pm">

at
<select name="numbertocall~2pm-5pm">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
  <tr>
     <td class="timeslot">5pm - 8pm</td>
     <td><input class="radioinput" name="timetocall" type="checkbox" value="5pm-8pm">

at
<select name="numbertocall~5pm-8pm">
     <option value="" selected></option>
     <option value="Home">Home</option>
     <option value="Work">Work</option>
     <option value="Mobile">Mobile</option>
</select></td>
  </tr>
</table>
<br>
<input type="button" onClick="javascript: test()" value="Validate">
</form>

</BODY>
</HTML>
0
 
bradderickAuthor Commented:
Hi Rozanaz,

I think the code you posted might have a problem as that table is only a part of the form on the page. There are 15 other textboxes, radio buttons and selects. So we really need to call things by name i think?

let me know your thoughts...

Brad
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
bradderickAuthor Commented:
Actually on closer examination it appears that this should work with other elements in the form as well?
0
 
bradderickAuthor Commented:
Thanks Rozanaz, that works extremely well!

You definitely earned these points.

Thank you again!

Brad
0
 
RozanaZCommented:
You are welcome :)

THank you for points
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.