7 Replies Latest reply on May 28, 2013 11:46 AM by kt03

    dynamic check boxes validation

    kt03

      Hi all,

       

      I have the query is displayed the check boxes.  I'd to validate and make sure at least one check box needs to be checked.  The code i have below is not working.  Can you please help.

       

      Thanks

       

      KT

       

      <cfinclude template="userCheck.cfm">

      script type="text/javascript">

              function validate(oForm) {

                      var numChecked = 0;

                      for (var idx=0; idx<oForm.category.length; idx++) {

                              if (oForm.category[idx].checked == true) {

                                      numChecked++;

                                      break;

                              }

                      }

                      if (numChecked > 0) {

                              return true;

                      } else {

                              alert('Please check at least one checkbox');

                              return false;

                      }

              }

      </script>

       

      <html>

      <body>

      <form onsubmit="return validate(this);"" action="next.cfm" id="form" name="form">

      <cfoutput query="variables.category">

      <input type="checkbox" name="category" id="category">#cat_var#

      </cfoutput>

      <input type="submit" value="Submit" />

      </form>

      </body>

      </html>

        • 1. Re: dynamic check boxes validation
          duncancumming Level 3

          ID elements on a page have to be unique.  As you're looping over a query, I'm guessing you're ending up with multiple checkboxes, all of them with ID=category.  So document.getElementById("category") doesn't know which checkbox you're interested in (getElementById only returns 1 element).  You might want to look at either something like jQuery's .each(), or simply document.getElementsByClassName

          • 2. Re: dynamic check boxes validation
            WolfShade Level 4

            Avoid using reserved words for id/name ("form").

             

            ^_^

            • 3. Re: dynamic check boxes validation
              kt03 Level 1

              ok, i got the check box working, but it not checking for other fields on the page.  Can you pls advice this?

               

              <script type="text/javascript">

              function validateForm(oForm) {

               

              //checkboxes

                      var numChecked = 0;

                      for (var idx=0; idx<oForm.category.length; idx++) {

                              if (oForm.category[idx].checked == true) {

                                      numChecked++;

                                      break;

                              }

                      }

                      if (numChecked > 0) {

                              return true;

                      } else {

                              alert('Please check at least one checkbox');

                              return false;

                      }

                     

                     

              /'/comments

               

              if (oForm.getElementById ("comments").value.length == 0)

                  alert ("Please enter a search field");

                  return false;

               

               

               

              }

              </script>

               

              <textarea name="comments" id="comments"></textarea>

              • 4. Re: dynamic check boxes validation
                duncancumming Level 3

                The problem is you are returning true/false before you try to validate the comments field.  Assuming you don't want to do alerts for both the checkbox and the comments field at the same time, then simply remove the

                "return true;" statement:

                 

                if (numChecked === 0) {

                                 alert('Please check at least one checkbox');

                                return false;

                        }

                • 5. Re: dynamic check boxes validation
                  kt03 Level 1

                  Thanks for your repond.  The validate seems working with displayed message, but even i checked the checkbox, enter the comments, hit submit button,but it didn't go any where.  submit button seems didn't do anything.

                   

                  <script type="text/javascript">

                  function validateForm(oForm) {

                   

                  //checkboxes

                          var numChecked = 0;

                          for (var idx=0; idx<oForm.category.length; idx++) {

                                  if (oForm.category[idx].checked == true) {

                                          numChecked++;

                                          break;

                                  }

                          }

                       

                          if (numChecked == 0){

                                  alert('Please check at least one checkbox');

                                  return false;

                          }

                         

                         

                  //comments

                   

                  if (document.getElementById ("comments").value.length == 0)

                      alert ("Please enter a search field");

                      return false;

                   

                   

                   

                  }

                  </script>

                  • 6. Re: dynamic check boxes validation
                    duncancumming Level 3

                    the very last statement in your validateForm function should be "return true;"

                     

                    Also you have a mistake in the code. You've got:

                     

                    if (document.getElementById ("comments").value.length == 0)

                        alert ("Please enter a search field");

                        return false;

                     

                     

                     

                    }

                     

                    However you don't have an opening { on that  IF statement.  And the closing } we can see is for the function itself, not that IF.

                     

                    So it's really doing it like this:

                     

                    if (document.getElementById ("comments").value.length == 0) {

                        alert ("Please enter a search field");

                    }

                     

                    return false;  

                    }

                     

                    i.e. it always returns false for your validate function.  Change that last bit of the code like so:

                     

                    if (document.getElementById ("comments").value.length == 0) {

                        alert ("Please enter a search field");

                        return false;

                     

                    return true; 

                    }

                    • 7. Re: dynamic check boxes validation
                      kt03 Level 1

                      thank you very much. 

                      i dont know much about the javascript, but unfortunately my form needs javascript validation.

                       

                      i have another quuestion.  i have the form with several fields, but i only need to validate if radio is selected w/o enter name into name field.  I want to display message both coditions are meet. - thanks

                       

                      <script type="text/javascript">

                       

                      function checkRadios(form) {

                         var btns = form.r0;

                         for (var i=0; el=btns[i]; i++) {

                           if (el.checked) return true; {

                               if (document.getElementById ("name").value.length == 0){

                         }

                         }

                         alert('name must be entered');

                         return false;

                      }

                       

                      return true;

                      }

                      </script>

                       

                      <form id="f0" action="test.cfm" onsubmit="return checkRadios(this);">

                        one<input type="radio" name="r0" value="1"><br>

                      <input type="text" name="t" class="required">

                      <input type="submit" name="submit" value="Save" class="button">

                      </form>