We are developing a web application using ASP.NET MVC 5.

Along with the backend framework we use kendo UI as our frontend framework.

The following list is the version of plugins we use.
1. jQuery  v1.91

2. jQuery Validation Plugin v1.14.0

3. kendo UI v2014.3.1316

We have encountered a problem when validating the form, where the select list itself is removed totally

on the second time of validation before the form is submitted

Here's the scenario:

1. We have two DropDownLists on our page, one is for choosing Nations, which triggers the initialization of "City" DropDownList, both of which are bounded to the model fields NATI_CODE and CITY_CODE.

2. When we don't choose any nations and submit the form, the validation message will appear, since $('#formId').valid() returns false, which is what we expect, and is generated from the HtmlMessageValidationFor using Razor. 

3. However, when we re-fill the missing fields, and re-submit the form, here's when something horrible happens. The $('#formId').valid() now returns true, but totally destroys(removes) our City list, which means that the city the user has chosen is not submitted.

4. We are 100% sure that before the form was submitted, we could get the CITY_CODE by using $('#CITY_CODE').val(), but when we tried to submit for the second time, as soon as .valid() is executed, $('#CITY_CODE').val() becomes "undefined", and $('#CITY_CODE').length === 0 returns true.

We are not sure if this is a kendo UI problem, or a jQuery validation problem, or the Unobtrusive validation framework bugging the whole form submitting process, but we would like you to help out.

Please let us know if you need additional information, thank you.