How do I validate mvcdropdownlist when the items are loaded dynamically via jquery.

See more:

VB

jQuery

validation

validator

, +

Please I need your urgent help

I am working on an mvc5 view where users fill in their details inorder for their order item to be delivered...

When users select their state from an mvcdropdownlistfor, the drop down for city is auto populated by jquery calling the controller function to populate the list via the user selected choice for state...
Everything works fine till this point...

The issue here is model validation doesnt work for the city dropdown anymore because i loaded it via jquery when user click to select their state ...I have tried using different jquery sripts for client side validation for the city dropdown but its not working as well...

---------------------------------------------------------------------------
This is the code on the view for both mvc dropdownlist

<span class="required">* </span>@Html.LabelFor(Function(m) m.deliveryState)<br />
                               @Html.DropDownListFor(Function(m) m.deliveryState, Model.Items, " -- select -- ", New With {.id = "deliveryState", .class = "pbuy", .name = "command"})
                               <span style="color:red; display:block;">@Html.ValidationMessageFor(Function(m) m.deliveryState)</span>
                           </td>

<span class="required">* </span>@Html.LabelFor(Function(m) m.cityId)<br />
                                @Html.DropDownListFor(Function(m) m.cityId, Model.AvailableCities, " -- select -- ", New With {.id = "cityId", .class = "pbuy", .name = "command"})
                                <span style="color:red; display:block;">@Html.ValidationMessageFor(Function(m) m.cityId)</span>
                                <span id="cities-loading-progress" style="display: none;"><b>LOADING. PLEASE WAIT ...</b></span><br />

What I have tried:

on the controller

Dim con As New SqlConnection(taaxxto)
con.Open()
Dim sqlSelect As String = "SELECT * FROM [TF_States_DeliveryCharges] ORDER BY [StateId] ASC"

Dim oComm As New SqlCommand(sqlSelect, con)
Dim rdr As SqlDataReader = oComm.ExecuteReader()
If rdr.Read And rdr.HasRows Then
While rdr.Read
m.StateItems.Add(rdr("StateDesc"))
End While
End If
rdr.Close()
con.Close()
Return View(m)

on the view

$("#deliveryState").change(function () {
var selectedItem = $(this).val();
var ddlCities = $("#cityId");
var citiesProgress = $("#cities-loading-progress");
citiesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "@(Url.RouteUrl("GetCitiesByStateId"))",
data: { "stateId": selectedItem },
success: function (data) {
ddlCities.html('');
$.each(data, function (id, option) {
ddlCities.append($('<option></option>').val(option.id).html(option.name));
});
citiesProgress.hide();
$.validator.unobstrusive.parse('#CheckoutForm');
if ($.validator) $.validator.setDefaults({
ignore: []
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve cities.');
citiesProgress.hide();
}
});
});
});

$('#cityId').trigger("input");
$('#cityId').validate();

var userCity = $("#cityId").val();
if (userCity == '') {
var validator = $("#CheckoutForm").validate();
validator.element("#cityId");
return false;
$("#cityId").after('City is required');

}

if (!$('#cityId').valid()) {
e.preventDefault();
}
})</script>



scripts used


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Taafoo/JS/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
charset="utf-8"></script>