Skip to main content
K
kt03
Inspiring
May 28, 2013
Question

dynamic check boxes validation

  • May 28, 2013
  • 2 replies
  • 2521 views

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>

    This topic has been closed for replies.

    2 replies

    WolfShade
    WolfShade
    Legend
    May 28, 2013

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

    ^_^

    K
    kt03Author
    Inspiring
    May 28, 2013

    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>

    D
    duncancumming
    Participating Frequently
    May 28, 2013

    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;

            }

    D
    duncancumming
    Participating Frequently
    May 28, 2013

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices