Question

I am using JQuery to hide/show a div depending on the selected value of a combo box. This part works fine. However, when hiding the div, the jquery function should also disable 3 RequiredFieldValidators which are in that div. I’ve been looking online and it seems that this can easily be accomplished using:

ValidatorEnable(ValidatorName, false);

But when I try using that method, nothing works, the RequiredFieldValidators still display an error even though the div is hidden.

My JQuery function:

<script type="text/javascript">
        $(document).ready(function () {
            var det = $("#SponsorDetails");
            $(det).hide();
            var all = $("#AllDetails");
            $(all).hide();

            $("#<%=SelectAccount.ClientID %>").click(function () {
                //hide social worker and sponsor stuff
                var value = $("#<%=SelectAccount.ClientID %> option:selected").val();
                if (value == "Social_Worker") {
                    //show social worker stuff
                    $("#AllDetails").show("slow");
                    $("#SponsorDetails").hide("slow");
                    ValidatorEnable(document.getElementById("#<%=AddressValidator.ClientID %>"), false);
                    ValidatorEnable(document.getElementById("#<%=CityValidator.ClientID %>"), false);
                    ValidatorEnable(document.getElementById("#<%=CountryValidator.ClientID %>"), false);

                } else if (value == "Sponsor") {
                    //show sponsor stuff
                    $("#AllDetails").show("slow");
                    $("#SponsorDetails").show("slow");
                    ValidatorEnable(document.getElementById("#<%=AddressValidator.ClientID %>"), true);
                    ValidatorEnable(document.getElementById("#<%=CityValidator.ClientID %>"), true);
                    ValidatorEnable(document.getElementById("#<%=CountryValidator.ClientID %>"), true);

                }
            });

        });


    </script>

Someone suggested I could use Validation groups or a custom validator, but using jquery just seems much simpler but I don’t know why it won’t work.

Answer 1

You have confuze the jQuery with the simple javascript. In simple javascript we do not use the symbol # in front of the element id. So remove it from all the getElementById function and it will work.

For example

document.getElementById("<%=CountryValidator.ClientID %>")

The error you get is because you call getElementById with out check the return of them, so you get throw error from the use of the return of this function that can not be use.