Jquery 不显眼的验证“无法读取未定义的 属性 'type'”

Jquery Unobtrusive Validation 'Cannot read property 'type' of undefined'

我在我的 MVC 应用程序中使用 jQuery Unobtrusive Validation。当 post 返回时,验证按规定进行。但是,我有充分的理由阻止 post-back 客户端。

我遵循在多个站点看到的规定方法...并且我尝试了许多不同的组合。但是,我仍然不断收到以下错误:

"Cannot read property 'type' of undefined"

我的 JAVASCRIPT 看起来像:
当我调用 'showErrors'...

时发生错误
function onValidateCity(e){

    // Checks the value of my Kendo Combobox
    var value = this.value();
    if (value && this.selectedIndex === -1) {

        // Yes, it reaches this part
        var validator = $('#CityId').validate();
        validator.showErrors({"CityId": "My custom error message!"});
    }
}

我的 MVC 助手创建了以下内容 HTML:

<span class="k-widget k-combobox k-header form-control">
    <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
        <input name="CityId_input" class="k-input form-control" type="text" autocomplete="off" title="" maxlength="524288" role="combobox" aria-expanded="false" placeholder="-- Select City --" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="CityId_listbox" aria-busy="false" style="width: 100%;" /> 
        <span tabindex="-1" unselectable="on" class="k-select">
            <span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1" aria-controls="CityId_listbox">select</span>
        </span>
    </span>
    <input autocomplete="off" class="form-control" data-val="true" data-val-required="The City field is required." id="CityId" name="CityId" type="text" value=  "28dbddea-660d-4bbb-b063-f926b1153866" data-role="combobox" aria-disabled="false"
aria-readonly="false" novalidate="novalidate" style="display: none;" />
</span>

<span class="field-validation-valid text-danger" data-valmsg-for="CityId" data-valmsg-replace="true"></span>

MVC(验证)助手看起来像:
@Html.ValidationMessageFor(model => model.CityId, "", new { @class = "text-danger" })

当您初始化 validator 时,针对包含嵌套在其中的 CityId 输入的元素执行此操作,而不是针对输入元素本身。它可以是 formdivspan

这是在 fiddle 中工作的简化代码,我是针对 span 做的: http://jsfiddle.net/o0qhcbbL/1/

$('#button').click(function (e) {
    onValidateCity(e)
})

function onValidateCity(e) {

    var validator = $('#xx').validate();

    validator.showErrors({
        "CityId": "My custom error message!"
    });
}

html:

<span id="xx">
    <input id="CityId" name="CityId" type="text" />
</span>
<span id="button">select</span>