Click here to Skip to main content
16,020,669 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
HTML
<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>





HTML
<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>
Posted
Updated 13-Apr-16 2:43am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900