Jquery.Validate 在我将 @Html.DropDownListFor 添加到表单后停止验证任何控件

Question

我有一个包含多个控件的表单，这些控件已使用 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");
        }
    });

});

Answer 1

啊，原来我 havejquery.validate.unobtrusive.js 已加载，一旦我删除它，所有控件都开始正确验证。

Jquery.Validate 在我将 @Html.DropDownListFor 添加到表单后停止验证任何控件

Jquery.Validate stops validating any controls once I add @Html.DropDownListFor to the form

asp.net-mvc

jquery

jquery-validate

unobtrusive-validation