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

Question

I'm using MVC 4 with bootstrap 3, jQuery v1.11.2, jQuery Validation v1.13.1 and Microsoft jQuery Unobtrusive Validation v3.2.2.

I have a form with 2 inputs. In order to use those as date pickers I use this code:

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
        });
});

My problem is that the client side validation for those inputs doesn't work for some reason... I noticed that when I put in comment those lines, client side validation start working again.

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

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

Why is that happening, and how can I solve it ? Thanks!

Wouldn't be easier to use `@Html.TextBoxFor(d => d.SearchParameters.StartDate, new { @class = "form-control", @readonly = "readonly" })` rather than jquery? But not sure if that will solve the issue. — , Jan 29 '15 at 10:53
Update: even if I comment only the script that adds the 'readonly' attribute, client side is working. The problem begins when I add the readonly attribute from js. — user3125999, Jan 29 '15 at 11:04
How does that prevent them using the datepicker?. But looking at Chris's answer regarding the change to V1.13.1, a better 'workaround' would be reset the defaults for the validator e.g.`$.validator.setDefaults({ ignore: [] });` — , Jan 29 '15 at 11:12
I want to allow them to use the date picker *only*, nothing else. Thanks for the help guys. — user3125999, Jan 29 '15 at 11:16

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

JQuery Validation ignores input elements with a ReadOnly attribute as of V1.13.1 according to this question from November.

There also a workaround in that answer :-)

edited May 23 '17 at 11:43

Community

1
1

answered Jan 29 '15 at 11:07

Slappywag

1,143
1
17
27

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

1 Answers1