一旦我将@Html.DropDownListFor 添加到表单中，Jquery.Validate 就会停止验证任何控件

Posted 2023-05-08

【中文标题】一旦我将@Html.DropDownListFor 添加到表单中，Jquery.Validate 就会停止验证任何控件

【英文标题】：Jquery.Validate stops validating any controls once I add @Html.DropDownListFor to the form

【发布时间】：2019-09-08 18:39:17

【问题描述】：

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

);

【问题讨论】：

如果不调用.rules() 为新字段动态添加规则，您将无法向表单动态添加新字段。一个例外是包含用于规则声明的内联属性的任何字段。

我没有动态添加控件。我的意思是，在设计表单时，一切正常，直到我添加下拉列表，然后整个表单停止验证。

那么您需要向我们展示呈现的 HTML 标记。

我已经添加了生成的 HTML

那是因为 Unobtrusive Validation 构造和调用.validate()，它完全优先于你对这个方法的调用。最初使用“不显眼的验证”标记问题可能对我们有所帮助。

【参考方案1】：

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

【讨论】：

对，因为您只能调用.validate() 一次，而忽略所有其他调用。由于 Unobtrusive Validation 会自动构造/调用.validate()，因此您的会被忽略。但是，您最初的问题无法回答，因为它没有解释在您添加下拉列表之前它是如何工作的。要么您安装了 Unobtrusive，要么您没有安装。