Jquery.Validate прекращает проверять любые элементы управления после добавления @ Html.DropDownListFor в форму - PullRequest
Новая
       24

Jquery.Validate прекращает проверять любые элементы управления после добавления @ Html.DropDownListFor в форму

0 голосов
/ 18 апреля 2019

У меня есть форма с несколькими элементами управления, которые проверены с помощью Jquery.Validate. Все они работают, пока я не добавлю новую строку с @ Html.DropDownListFor. В консоли нет ошибок, валидатор просто перестает работать. Когда я говорю, что перестает работать, я имею в виду, что ничего не выделено красным, и мой btnClick говорит, что форма действительна. 

//This works
<div class="col-sm-5">
@Html.LabelFor(m => m.PublicationName, new { @class = "control-label" })
@Html.TextBoxFor(m => m.PublicationName, new { @class = "form-control" })
</div>

//Adding this causes everything to stop validating
//Using the Select2 Plugin
@Html.LabelFor(m => m.JournalistId, new { @class = "control-label" })
@Html.DropDownListFor(m => m.JournalistId,
(SelectList)ViewBag.Journalists,  new { @class = "form-control" }
)

Итоговый HTML 

<div class="col-sm-5">
<label class="control-label" for="JournalistId">Author</label>
<select class="form-control select2-hidden-accessible valid" data-val="true" data-val-number="The field Author must be a number." id="JournalistId" name="JournalistId" data-select2-id="JournalistId" tabindex="-1" aria-hidden="true" aria-describedby="JournalistId-error"><option value="" data-select2-id="2">Select</option>
<option value="346">Name 1</option>
<option value="381">Name 2</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="1" style="width: 357.5px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-JournalistId-container"><span class="select2-selection__rendered" id="select2-JournalistId-container" role="textbox" aria-readonly="true" title="Select">Select</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
 </div>

Моя модель 

    [Display(Name = "Publication Name")]
    public string PublicationName { get; set; }

    public int? PublicationId { get; set; }

    public string Journalist { get; set; }

    [Display(Name = "Author")]
    public int? JournalistId { get; set; }

Мой сценарий 

$(function () {

    $('.btnNext').click(function (e) {
        if ($("#form1").valid()) {
            alert('valid');
        } else {
            alert('not valid');
        }
    });

    $("#form1").validate({
        rules: {
            PublicationName: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            PublicationName: {
                required: "Please enter a Publication Name",
                minlength: "Your username must consist of at least 2 characters"
            }
        },
        errorElement: "em",
        errorPlacement: function (error, element) {
            // Add the `help-block` class to the error element
            error.addClass("help-block");

            // Add `has-feedback` class to the parent div.form-group
            // in order to add icons to inputs
            element.parents(".col-sm-5").addClass("has-feedback");

            if (element.prop("type") === "checkbox") {
                error.insertAfter(element.parent("label"));
            } else {
                error.insertAfter(element);
            }

            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if (!element.next("span")[0]) {
                $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
            }
        },
        success: function (label, element) {
            // Add the span element, if doesn't exists, and apply the icon classes to it.
            if (!$(element).next("span")[0]) {
                $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
            $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
            $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
        }
    });

});

1 Ответ

0 голосов
/ 21 апреля 2019

Argh, оказывается, я загрузил jjjery.validate.unobtrusive.js, и как только я удалил его, все элементы управления начали проверяться правильно.

...