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

Question

我将几个输入分成不同的容器(面板).我style="display:none;"遇到的问题是,如果其中一个面板是hidden(),那么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内部时,不会在客户端上验证"UserName"属性 "display:none;"

谢谢

Answer 1

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

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

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

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

参考

这也是一个有用的博客帖子