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

根据this question from November，JQuery Validation从V1.13.1中忽略具有ReadOnly属性的输入元素。

答案中还有一个解决方法： - ）

使用javascript添加类后，Jquery客户端验证不起作用

1 个答案: