javascript - Cascading Dropdown Validation is failing in MVC Razor -

problem statement:

i have created cascading dropdown country , state using jquery , json,everything working fine.i'm able bind data country , data state on change event of country.only problem i'm facing cascading validation country , state.

on opening view iff click create button without selecting/entering values controls showing validation message all.if select country , click create, not showing validation message state if no value selected state.

what i'm doing wrong?? think i'm doing wrong in script part of view !!!

please see attached images more details:

image 1 : when click create button showing validations controls.

image 2 : after selecting country drop-down if click create button,validation state not appearing why??

view code:

<div class="form-horizontal">         <hr />         @html.validationsummary(true)          <div class="form-group">             @html.labelfor(model => model.citymodel.countryid, new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.dropdownlistfor(model => model.citymodel.countryid, new selectlist(model.ddlcountrystatecity.ddlcountry, "value", "text"), "select country", new { id="countryid",onchange="getddlstate()",@class = "form-control"})                 @html.validationmessagefor(model => model.citymodel.countryid)             </div>         </div>         <div class="form-group">             @html.labelfor(model => model.citymodel.stateid, new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.dropdownlistfor(model => model.citymodel.stateid, new selectlist(model.ddlcountrystatecity.ddlstate, "value", "text"), "select state", new { id="stateid",@class = "form-control" })                 @html.validationmessagefor(model => model.citymodel.stateid)             </div>         </div>          <div class="form-group">               @html.labelfor(model => model.citymodel.cityid, new { @class = "control-label col-md-2" })             <div class="col-md-10">                  @html.textboxfor(model => model.citymodel.cityid, new { @class = "form-control" })                  @html.validationmessagefor(model => model.citymodel.cityid)             </div>         </div>           <div class="form-group">                @html.labelfor(model => model.citymodel.name, new { @class = "control-label col-md-2" })             <div class="col-md-10">                  @html.textboxfor(model => model.citymodel.name, new { @class = "form-control" })                 @html.validationmessagefor(model => model.citymodel.name)             </div>         </div>          <div class="form-group">             <div class="col-md-offset-2 col-md-10">                 <input type="submit" value="create" class="btn btn-default" />             </div>         </div>     </div> 

script code:

@section scripts { @scripts.render("~/bundles/jqueryval") <script type="text/javascript">     function getddlstate() {         $("#stateid").empty();         $("#stateid").append("<option value='0'>select state</option>");         var countryid = $('#countryid').val();         var url = "@url.content("~/masterconfiggeneral/getddlstate")";         $.ajax({             url: url,             datatype: 'json',             data: { countryid: countryid },             success: function (data) {                 $("#stateid").empty();                 $("#stateid").append("<option value='0'>select state</option>");                 $.each(data, function (index, optiondata) {                     $("#stateid").append("<option value='" + optiondata.value + "'>" + optiondata.text + "</option>");                 });             }         });     }   </script> } 

try this:

 @section scripts {    @scripts.render("~/bundles/jqueryval")       <script type="text/javascript">          function getddlstate() {          var countryid = $('#countryid').val();          var url = "@url.content("~/masterconfiggeneral/getddlstate")";          $.ajax({            url: url,            datatype: 'json',            data: { countryid: countryid },            success: function (data) {             $("#stateid").empty();             $("#stateid").append("<option value='' selected='selected'>select state</option>");             $.each(data, function (index, optiondata) {             $("#stateid").append("<option value='" + optiondata.value + "'>" + optiondata.text + "</option>");             });         }     });  }  </script> }