Question

我将几个输入分成不同的容器（面板）。我遇到的问题是，如果其中一个面板被隐藏（style="display:none;"），jQuery.validate插件不会验证这些输入。

我用一个小例子进行测试并发生同样的问题：

视图：

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Fields</legend>

        <div class="UserName" style="display:none;">
            <div class="editor-label"> @Html.LabelFor(model => model.UserName) </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.UserName) @Html.ValidationMessageFor(model => model.UserName)
            </div>
        </div>

        <div class="editor-label"> @Html.LabelFor(model => model.FirstName) </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label"> @Html.LabelFor(model => model.City) </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.City) @Html.ValidationMessageFor(model => model.City)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

}

型号：

public class UserModel {

    [Required]
    [StringLength(6, MinimumLength = 3)]
    [Display(Name = "User Name")]
    [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
    [ScaffoldColumn(false)]
    public string UserName { get; set; }

    [Required]
    [StringLength(8, MinimumLength = 3)]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Required]
    [StringLength(9, MinimumLength = 2)]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
    [Required()]
    public string City { get; set; }

}

当div位于样式"display:none;"

的div中时，客户端上未验证“UserName”属性

谢谢

Answer 1

它是不要验证隐藏输入字段的理想行为，使用jquery validate插件，您可以通过设置忽略选项来验证隐藏的输入字段，如

$('#fromID').validate({
            ignore: "",            
        });

但是由于你在使用jquery validate插件的mvc3中使用不显眼的验证，你不能自己初始化插件，你必须在初始化之后更改它的设置，如

var validatorSettings = $.data($('form')[0], 'validator').settings;
validatorSettings.ignore = "";

Reference

This is also a helpful blogpost

如果容器被隐藏，则jQuery.validate无效

1 个答案: