Dynamically enable or disable RequiredFieldValidator based on value of DropDownList

Question

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?

Clydesdale

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. – Commensurate

Thanks for the suggestion. I ended up using a CustomValidator. I had not used them before, but after I got it set up, it was much more powerful. I was easily able to add other validations as well. – Clydesdale

@Jason M: If you make the CustomValidator suggestion an answer, I will accept it. – Clydesdale

Answer 1

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.

Commensurate

I disagree. I can't see a way for design issue in the future. Specially in simple situations. – Shirtmaker

RequiredFieldValidator keep things simple on most situations. – Lucre

CustomValidator does not validate empty fields – Spadix

Answer 2

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);
    ....
});

Roaster

Have you tried this code? Looks like a nice client side solution. I was just about to post a server side solution, but this one looks like it toggles client side validators, right? – Stith

@Stith - yeah, this should toggle the validators client side without postbacks – Roaster

i know this is an old post, but the first parameter for ValidatorEnable is a DOM element, not a string ID. – Orbit

@jbabey, What are you talking about? – Roaster

@Roaster ValidatorEnable(RequiredFieldValidatorId, false); should be ValidatorEnable(document.getElementById(RequiredFieldValidatorId), false); – Orbit

what makes you think workPhoneValidator isn't an element? ;) – Roaster

@Roaster There isn't code showing where it is declared/initialized, so it is kind of a "what is that?" moment when you see those two variables. – Tribesman

note: this will not stop server-side validation so Page.IsValid will fail. – Slovenly

make sure EnableClientScript is true – Dilution

Answer 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

Kop

Answer 4

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

Psilomelane

make sure EnableClientScript is true – Dilution

Answer 5

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.

Belligerence

Answer 6

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

HTH

Denominationalism

Are you talking about the OnSelectedIndexChanged event of the DropDownList? I set up that event to call the method that enables/disables the validators, but the event doesn't fire until after validation. At that point, it is too late. I need it to fire before validation occurs. – Clydesdale

No, he means the client event "onchange" – Psilomelane

On second thoughts, I would first render the screen with only the dropdown for the preference selection. Then when the user has selected the preference, render a textbox with its relevant validator control instead of doing it all on the client. – Denominationalism

Answer 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);
    }
}

Wealthy