CODEWITHSUNDEEP
c#jqueryasp.netvalidation
user3321095
user3321095

Reputation: 195

RequiredFieldValidator attached to DropDownList does not fire after appending options with jquery

I'm building an ASP.NET page in C#. There are 2 dropdownlists on the page, both have a required field validator. The first ddl is bound from codebehind. The second ddl is populated with a jquery ajax call to a WebMethod based on what was selected in the first ddl.

If I submit the form without selecting any values in either ddl the validators fire as expected. However, when I select a value in the first ddl then select a value in the second ddl and submit the form the Page.IsValid property is false. If I check the validators collection in the Page object and view the validator bound to the second ddl its valid property is false.

I don't know what else to try. I've tried calling ValidatorEnable and ValidatorValidate to try to re-register the validator on the client after selecting a value in the second ddl but it's doesn't work.

Can someone tell me what's going? How do I fix this? I really want to avoid using a postback to populate the second ddl. If anyone has any ideas I'd really appreciate some help.

Here's the code

<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlState" Display="Dynamic" ErrorMessage="Required" InitialValue="" ValidationGroup="County" />
<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="false" ValidationGroup="County" />

<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCounty" Display="Dynamic" ErrorMessage="Required" InitialValue="" ValidationGroup="County" />
<asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="false" ValidationGroup="County" />

$('#<%=ddlState.ClientID %>').change(function() {
                $('#<%=ddlCounty.ClientID %>').find('option').remove();

                var counties = $.ajax({
                                   type: "POST",
                                   contentType: "application/json; charset=utf-8",
                                   url: "County.aspx/GetCounties",
                                   data: "{'state':'" + $(this).val() + "'}",
                                   dataType: "json",
                                   dataFilter: function (data) { return data; },
                                   success: function(data) {
                                       var d = jQuery.parseJSON(data.d);
                                       $('#<%=ddlCounty.ClientID %>').append('<option value=""> - select - </option>');
                                       $.each(d, function(i, val){    
                                           $('#<%=ddlCounty.ClientID %>').append('<option value="'+ val +'">'+ val +'</option>');
                                       });
                                   },
                                   error: function (jqXHR, error, errorThrown) {
                                       if (jqXHR.status && jqXHR.status == 400) {
                                           alert("An error occurred. Please try again.");
                                           //alert(jqXHR.status + " -- " + jqXHR.responseText);
                                       }
                                   }
                               });
            });

Thanks

Upvotes: 0

Views: 598

Answers (1)

Mathieu G
Mathieu G

Reputation: 395

My guess would be that the server don't know that the DropDownList have values associated with it. He think they don't have values so don't validate them.

I think you would have to do the same databinding in server code on the selected index changed event of the ddlState. 

private void ddlState_SelectedIndexChanged(e as args) : ddlState.SelectedIndexChanged {
   // Do your databinding for ddlCountry;
}

Upvotes: 0

Related Questions