Dynamically enable or disable RequiredFieldValidator based on value of DropDownList

I have an ASP.NET form with three text inputs, one each for “Work Phone”, “Home Phone” and “Cell Phone”. Each of these text inputs has a RequiredFieldValidator associated with it. I also have a DropDownList where the user can select the preferred phone type.

I want to only require the field that is selected in the DropDownList. For example, if the user selects “Work Phone” from the DropDownList, I want to disable the RequiredFieldValidator for “Home Phone” and “Cell Phone”, thereby only making the “Work Phone” field required.

I have a method that enables and disables these validators based on the value of the DropDownList, but I cannot figure out when to call it. I want this method to run before the validation takes place on the page. How would I do that?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can do this with JavaScript like this:

ValidatorEnable(RequiredFieldValidatorId, false);

Then have your drop down list use the onchange event (I’d suggest using jQuery)

$("#<%=dropDownList.ClientID %>").change(function(){
    var val = $(this).val();
    var skip = null;
    if (val == 1)
       skip = "workPhoneValidator";
    else if (val == 2)
       skip = "cellPhoneValidator";
    ....

    // by popular demand...
    var $skip = $("#" + skip)[0];

    if (skip != "workPhoneValidator") ValidatorEnable($skip, false);
    if (skip != "cellPhoneValidator") ValidatorEnable($skip, false);
    ....
});

Method 2

Why not use a CustomValidator in this case? Turning off/on a RequiredFieldValidator could lead to a design issue in the future – I’d stick to using them on fields that are going to be required.

Method 3

When you are using home phone, in dropdown selectedindexchange event, make the required field validators invisible.

like..

if homephone is selected,

homephonevalidator.visible=true
cellphonevalidator.visible=false
workphonevalidator.visible=false

if cellphone is selected,

homephonevalidator.visible=false
cellphonevalidator.visible=true 
workphonevalidator.visible=false

if workphone is selected,

homephonevalidator.visible=false
cellphonevalidator.visible=false
workphonevalidator.visible=true

Method 4

Possible way would be:

• Set in your DropDownList AutoPostBack="true"
• In the SelectedIndexChanged event handler of the DropDownList enable/disable your validators
• Set in your DropDownList CausesValidation="false" to avoid that the validators block a postback when you change the DropDownList entry.

Method 5

OnChange event of the drop down you may have something like this

function EnableValidator(){
    ValidatorEnable(requiredFieldValidator, validatorMustBeEnabled);
}

Check on this url. Section “Client-Side APIs”

http://msdn.microsoft.com/en-us/library/Aa479045#aspplusvalid_clientside

Method 6

OnChange of the DropDownlist, you will need to register a server-side event handler that enables/disables the validator…

HTH

Method 7

This is good way to enable and disable server side control validation from jquery event:

<label class="label_radio" for="Oversize"  onclick="EnableDisbledValidator('show')">show textbox</label>

<asp:TextBox ID="txtNote" runat="server" class="checkvalidation"></asp:TextBox>

 <asp:RequiredFieldValidator ID="rfvNote" runat="server" ControlToValidate="txtNote" SetFocusOnError="true" ErrorMessage="Please enter the note" Display="Dynamic" CssClass="error-tooltip"></asp:RequiredFieldValidator>

function EnableDisbledValidator(lblShow) {
    if (lblShow == "hide") {;
        ValidatorEnable($('#<%=rfvNote.ClientID %>')[0], false);

    } else {
        ValidatorEnable($('#<%=rfvNote.ClientID %>')[0], true);
    }
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0