?
Solved

Simple Form Checkbox Validation

Posted on 2005-05-01
6
Medium Priority
?
272 Views
Last Modified: 2006-11-18
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
0
Comment
Question by:bradderick
  • 3
  • 3
6 Comments
 
LVL 8

Expert Comment

by:RozanaZ
ID: 13907372
<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
 

Author Comment

by:bradderick
ID: 13907526
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
 

Author Comment

by:bradderick
ID: 13907531
Actually on closer examination it appears that this should work with other elements in the form as well?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 8

Accepted Solution

by:
RozanaZ earned 2000 total points
ID: 13907548
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
 

Author Comment

by:bradderick
ID: 13907562
Thanks Rozanaz, that works extremely well!

You definitely earned these points.

Thank you again!

Brad
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 13907569
You are welcome :)

THank you for points
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one 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…
Suggested Courses

840 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