jQuery.validate如果容器被隐藏无效 [英] jQuery.validate not valid if the container is hidden

问题描述

我有几个输入分离到不同的容器（面板）。我的问题是，如果这些面板之一是隐藏的（风格=显示：无;）的jQuery.validate插件，不验证这些输入<。 / p>

我做一个小例子测试，并发生了同样的问题：

查看：

  @using（Html.BeginForm（））{
    @ Html.ValidationSummary（真）    ＆LT;＆字段集GT;
        ＆LT;传奇＆GT;＆领域LT; /传说＆GT;        ＆LT; D​​IV CLASS =用户名的风格=显示：无;＆GT;
            ＆LT; D​​IV CLASS =编辑标记＆GT; @ Html.LabelFor（型号=＆GT; model.UserName）LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =主编场＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.UserName）@ Html.ValidationMessageFor（型号=＆GT; model.UserName）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑标记＆GT; @ Html.LabelFor（型号=＆GT; model.FirstName）LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
            @ Html.TextBoxFor（型号=＆GT; model.FirstName）@ Html.ValidationMessageFor（型号=＆GT; model.FirstName）
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑标记＆GT;
            @ Html.LabelFor（型号=＆GT; model.LastName）
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
            @ Html.TextBoxFor（型号=＆GT; model.LastName）@ Html.ValidationMessageFor（型号=＆GT; model.LastName）
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑标记＆GT; @ Html.LabelFor（型号=＆GT; model.City）LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =主编场＆GT;
            @ Html.TextBoxFor（型号=＆GT; model.City）@ Html.ValidationMessageFor（型号=＆GT; model.City）
        ＆LT; / DIV＆GT;        ＆所述p为H.;
            ＆LT;输入类型=提交值=创建/＆GT;
        ＆所述; / P＆GT;
    ＆LT; /字段集＆GT;}
 

型号：

 公共类的usermodel {    [需要]
    [StringLength（6，MinimumLength = 3）]
    [显示（名称=用户名）]
    [RegularEx pression（@（\\ S）+的ErrorMessage =白色空间是不允许）]
    [ScaffoldColumn（假）]
    公共字符串用户名{获得;组; }    [需要]
    [StringLength（8，MinimumLength = 3）]
    [显示（名称=名）]
    公共字符串名字{获得;组; }
    [需要]
    [StringLength（9 MinimumLength = 2）]
    [显示（名称=姓氏）]
    公共字符串名字{获得;组; }
    [需要（）]
    公共字符串城{搞定;组; }}
 

当与风格DIV中的用户名属性没有在客户端验证显示：无;

感谢您

解决方案

其所需的行为不验证隐藏输入字段，使用jQuery验证插件，你可以通过设置忽略选项像

  $（'＃fromID'）。验证（{
            忽视： ，
        }）;
 

但由于您使用的是不显眼的审定MVC3中使用jQuery的验证插件无法初始化插件自己，你将不得不后，改变其设定的初始化像

  VAR validatorSettings = $。数据（$（'形式'）[0]，'验证'）设置。
validatorSettings.ignore =;
 

<一个href=\"http://stackoverflow.com/questions/8565135/jquery-validate-v-1-9-ignores-some-hidden-inputs\">Reference

这也是一个有用的博文

I have several input separated into different containers (panels). The problem I have is that if one of these panels is hidden (style="display:none;"), the jQuery.validate plugin, does not validate those inputs.

I make a test with a small example and happens the same problem:

view:

@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>

}

Model:

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; }

}

The "UserName" property is not validated on the client when is inside the div with style "display:none;"

Thank you

解决方案

its the desired behaviour to not to validate the hidden input fields, with jquery validate plugin you can validate the hidden inputs fields by setting the ignore option like

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

but since you are using the unobtrusive validation in mvc3 that uses the jquery validate plugin you cannot initialize the plugin yourself you will have to change its setting after its initialized like

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

Reference

This is also a helpful blogpost

这篇关于jQuery.validate如果容器被隐藏无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！