Enable/Disable asp:validators using jquery

Question

I am working with a wizard, where the user can sign up. There is a asp:RadioButtonList with two options, and some of the input fields in the wizard changes when the radiobutton changes. On each field there is some asp:Validators (asp:RequiredFieldValidator for example). The problem is, that when the user submits the page, the validator for the hidden textbox is still popping up.

First, here is the div tags which changes the shown textboxes and the RadioButtonList

<div id="divTxt1">
  <asp:TextBox runat="server" CssClass="text" ID="txtNumber"
       type="number"/>
  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
       runat="server" ControlToValidate="txtNumber" EnableClientScript="true" ErrorMessage="Error" ToolTip="Error">*
   </asp:RequiredFieldValidator>
</div>
<div id="divTxt2">
  <asp:TextBox runat="server" CssClass="text" ID="txtNumber2"
       type="number"/>
  <asp:RequiredFieldValidator ID="RequiredFieldValidator2" 
       runat="server" ControlToValidate="txtNumber2" EnableClientScript="true" ErrorMessage="Error2" ToolTip="Error2">*
   </asp:RequiredFieldValidator>
</div>
<div id="radio">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem Value="1" Selected="True">Privat</asp:ListItem>
   <asp:ListItem Value="2">Offentlig</asp:ListItem>
   </asp:RadioButtonList>
</div>

I have tried to solve it using JQuery like the following, which I have read should do the trick, but unfortunately it doesn't:

$(document).ready(function () {

    $('#<%= WizardStep1.ContentTemplateContainer.FindControl("RadioButtonList1").ClientID %> input').change(function () {
        if ($(this).val() == "1") {
            $('#txtNumber').toggle('fast');
            $('#txtNumber2').toggle('fast');     
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator1").ClientID %>')[0], false);
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator2").ClientID %>')[0], true);
        }

        if ($(this).val() == "2") {
            $('#txtNumber').toggle('fast');
            $('#txtNumber2').toggle('fast');
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator2").ClientID %>')[0], false);
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator1").ClientID %>')[0], true);
        }
    });
});

So, any ideas what's wrong?

are u sure ? your able to find the control ? checked for NULL ? — Ravi Gadag
– Ravi Gadag, Commented Mar 16, 2012 at 14:45
When I debug in IE it passes without error - but it doesn't disable. — Thomas
– Thomas, Commented Mar 16, 2012 at 14:50
isn't there any javascript errors, 'coz if it's not working, there must be one, don't you think so??? Just try inspecting with firebug. It should give you a hint. — MrClan
– MrClan, Commented Mar 19, 2012 at 11:48
Can you share the "generated" version of your javascript (with ids binded)? — tpeczek
– tpeczek, Commented Mar 19, 2012 at 14:22

Ads · Accepted Answer · 2013-10-10 05:45:11Z

19

I found a better option was to use simply:

document.getElementById("<%=myValidator.ClientID %>").enabled = true;

The ValidatorEnabled option as suggested above automatically calls the validation of the linked control and in my case shows the error message "please enter a value for seller name" which wasn't necessary or desired..

Using the ".enabled = true" option doesn't.

answered Oct 10, 2013 at 5:45

Ads

2,1942 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:02:05Z

The client side API for validators is here.

Something you may be able to adapt to your needs (this will disable all the validators via client script):

if (Page_Validators) {
    PageValidators.forEach(function(pageValidator) {
        if (pageValidator == null) {return;}
        vldGrp = pageValidator.validationGroup;
        ValidatorEnable(pageValidator, false);
    });
};

So you could add a if block to check the validator name, or more so the .controlToValidate which returns the target ID of the validator - then disable it:

if (Page_Validators) {
    PageValidators.forEach(function(pageValidator) {
        if (pageValidator == null) {return;}
        if (pageValidator.controltovaliddate != "<%= txtNumber2.ClientID %>") {
            return;
        }
        ValidatorEnable(pageValidator, false);
    });
};

You should also probably add a break in the loop if it's right one, if you don't need to check any further validators. You can use .some instead of .forEach to break early:

if (Page_Validators) {
    PageValidators.some(function(pageValidator) {
        if (pageValidator == null) {return false;}
        if (pageValidator.controltovaliddate != "<%= txtNumber2.ClientID %>") {
            return false;
        }
        ValidatorEnable(pageValidator, false);
        return true;
    });
};

You can encapsulate this into a function:

var validatorState = function(element, isEnabled) {
    if (Page_Validators) {
        PageValidators.some(function(pageValidator) {
            if (pageValidator == null) {return false;}
            if (pageValidator.controltovaliddate != "<%= txtNumber2.ClientID %>") {
                return false;
            }
            ValidatorEnable(pageValidator, false);
            return true;
        });
    };
};

and use:

validatorState('txtCancellationReson', true);

or

validatorState($('#txtCancellationReson').attr('id'), true);

waycell · Accepted Answer · 2012-03-23 14:16:12Z

use CustomValidator control for "RadioButtonList1" and separate controls visibilty logic to another javascript function.

<div id="divTxt1">
    <asp:TextBox runat="server" CssClass="text" ID="txtNumber" type="number"/>
</div>
<div id="divTxt2">
<asp:TextBox runat="server" CssClass="text" ID="txtNumber2"
type="number"/>
</div>
<div id="radio">
    <asp:RadioButtonList ID="RadioButtonList1" runat="server"     RepeatDirection="Horizontal"      onchange:"javascript:toogleTexxBoxesVisibility(this);">
   <asp:ListItem Value="1" Selected="True">Privat</asp:ListItem>
   <asp:ListItem Value="2">Offentlig</asp:ListItem>
   </asp:RadioButtonList>
<asp:CustomValidator ID="CustomValidator1" runat="server"     ClientValidationFunction="clientSideValidationFunction" ControlToValidate="RadioButtonList1" OnServerValidate="CustomValidator1_ServerValidate" Text="Validation Error Message">asp:CustomValidator>

<script type="text/javascript">
function clientSideValidationFunction(source,arguments)
    var inputvalue = arguments.Value; //RadioButtonList1's value

   if (inputvalue == "1" && $('#txtNumber').val() == '') {
        arguments.IsValid = false;
   }
   else if (inputvalue == "2" && $('#txtNumber2').val() == '') {
        arguments.IsValid = false;
   }
   else {
        arguments.IsValid = true;
   }
};

function toogleTexxBoxesVisibility(radiobutton)
{
   if(radiobutton.val =='1')
   {
      $('#txtNumber').show('fast');
      $('#txtNumber2').hide('fast'); 
   }
  else if(radiobutton.val =='2')
  {
       $('#txtNumber').hide('fast');
       $('#txtNumber2').show('fast'); 
  }
}
</script>
</div>

Rob Angelier · Accepted Answer · 2012-03-18 10:40:45Z

0

You can disable the validator like described in these posts:

http://www.aspdev.org/articles/asp.net-server-controls-disable-validation/

http://www.willasrari.com/blog/use-client-side-javascript-to-disable-aspnet-validators/000289.aspx

best regards

answered Mar 18, 2012 at 10:40

Rob Angelier

2,33316 silver badges29 bronze badges

3 Comments

Rob Angelier Over a year ago

that was exactly my question, but i decided not to respond.

JF Menard Over a year ago

From stackoverflow.com/help/how-to-answer "How do I write a good answer?": Provide context for links "Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline."

ADH Over a year ago

Second link is broken.

Collectives™ on Stack Overflow

Enable/Disable asp:validators using jquery

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related