up vote 0 down vote favorite
share [g+] share [fb]

I need a way to hide/show an asp.net Panel with Validators inside using Javascript.

I have successfully hide a panel using this code below:

function ShowHidePanel(panelId, isShown) {
    var pnl = document.getElementById(panelId);

    if (pnl != null) {
        if (isShown) {
            pnl.style.display = 'block';
        }
        else {
            pnl.style.display = 'none';
        }
    }
}

I am trying to disable all the validators inside using this code below:

function ToggleValidator(validatorId, enabled) {
    var validator = document.getElementById(validatorId);
    if (validator != null) {
        ValidatorEnable(validator, enabled);
    }
}

However, even though my panel is hidden, the validation on those validators inside is still firing.

Any thought will be appreciated.

link|improve this question
88% accept rate
feedback

3 Answers

up vote 0 down vote

You are hiding the panel on client side, so it will not have any effect on validators. They can access the control and hence fire the validations.

Disabling validator should work - only issue could be you are passing wrong id. You should use ClientID property of server side validator control to refer to validator on client side.

Regardless, another work-around for your issue can be to disable associated controls in the panel when it's hidden. If the control is disabled then validator won't be fired.

link|improve this answer
feedback
up vote 0 down vote

I've run into the same problem and perhaps there's an more elegant fix but I've resorted to using custom validators for 'conditional' validation when needed.

For example, I only require SSN if the user selects a SSN radio button.

 <asp:CustomValidator ID="cvSsn" runat="server" ControlToValidate="tbSsn"
                                        EnableClientScript="true" Display="Dynamic" ValidateEmptyText="true"
                                        ClientValidationFunction="onValidateSsn" OnServerValidate="OnValidateSSN"
                                        Text="SSN required" ErrorMessage="SSN required" CssClass="validation-error"
                                        ValidationGroup='Company' />

Javascript Client Side Validation:

function onValidateSsn(sender, args) {
            var rbSsn = $('#<%= rbSsn.ClientID %>');
            args.IsValid = !rbSsn.is(":checked") || isValidSSN(tbSsn.val());

        }

In your case it may look something like the following

 function onValidateField(sender, args)
 {
    if (!isShown)
      {
        args.IsValid = true;
        return;
      }

     // preform validation
link|improve this answer
In the case of using custom validator, what if it's required to use server validation instead of client validation? – madatanic Jul 28 '11 at 13:42
Set EnableClientScript to false and remove the ClientValidationFunction attribute. Then add the OnServerValidatee event handler attribute to the control declaration and your code behind. The example above has the OnServerValidate attribute. I alway make sure to implement the OnServerValidate since javascript can be disable on the client. – jdmonty Jul 28 '11 at 17:44
feedback
up vote 1 down vote

You'll need jQuery and have to set the ValidationGroup property on your validators, but this should work.

$("#<%= pnlContainer.ClientID %>")
    .find("span[validationGroup='MyValidationGroup']")
    .each(function () { ValidatorEnable(this, false); });
link|improve this answer
I haven't tried this yet. But this looks promising. – madatanic Jul 29 '11 at 16:14
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.