Jquery 添加 class 和 javascript 后客户端验证不起作用

Question

我将 MVC 4 与 bootstrap 3、jQuery v1.11.2、jQuery Validation v1.13.1 和 Microsoft jQuery Unobtrusive Validation v3.2.2 一起使用。

我有一个包含 2 个输入的表单。为了将它们用作日期选择器，我使用此代码：

HTML:

<div id="home-search-form" class="col-sm-3">
    @using (Html.BeginForm("Search", "Cars", FormMethod.Get, new { @class = "search-form", id="search-form" }))
    {
        <div class="form-group">
            @Html.LabelFor(d => d.SearchParameters.StartDate)
            @Html.EditorFor(d => d.SearchParameters.StartDate)
            @Html.ValidationMessageFor(p => p.SearchParameters.StartDate)
        </div>

        <div class="form-group">
            @Html.LabelFor(d => d.SearchParameters.EndDate)
            @Html.EditorFor(d => d.SearchParameters.EndDate)
            @Html.ValidationMessageFor(p => p.SearchParameters.EndDate)
        </div>

        <button class="btn btn-default">Search</button>
    }
</div>

JS:

$(function() {
        /* Handle pickup date and return date elements
        ----------------------------------------------*/
        var pickupDateElement = $("#SearchParameters_StartDate");
        var returnDateElement = $("#SearchParameters_EndDate");

        pickupDateElement.addClass("form-control");
        returnDateElement.addClass("form-control");

        // set datepickers readonly
        pickupDateElement.attr('readonly', true);
        returnDateElement.attr('readonly', true);

        $.datepicker.setDefaults($.datepicker.regional["he"]);

        pickupDateElement.datepicker({
            minDate: new Date(),
            defaultDate: new Date(),
            onClose: function () {
                var minDate = pickupDateElement.datepicker('getDate');
                minDate.setDate(minDate.getDate() + 1);

                // set as minDate of returnDate
                returnDateElement.datepicker('option', 'minDate', minDate);
            }
        });

        returnDateElement.datepicker({
            minDate: pickupDateElement.datepicker('getDate') + 1
        });
});

我的问题是这些输入的客户端验证由于某种原因不起作用... 我注意到当我对这些行发表评论时，客户端验证再次开始工作。

        pickupDateElement.addClass("form-control");
        returnDateElement.addClass("form-control");

        // set datepickers readonly
        pickupDateElement.attr('readonly', true);
        returnDateElement.attr('readonly', true);

为什么会这样，我该如何解决？谢谢！

Answer 1

JQuery 根据 this question from November.

，自 V1.13.1 起，验证将忽略具有 ReadOnly 属性的输入元素

该答案中还有一个解决方法:-)

Jquery 添加 class 和 javascript 后客户端验证不起作用

Jquery client side validation doesn't work after adding class with javascript

jquery

asp.net-mvc

twitter-bootstrap

client-side-validation