带有display:none表单元素的jquery验证器插件

时间:2021-10-11 19:47:54

I'm using the validator plugin found here to validate a form.

我正在使用此处的验证器插件来验证表单。

Problem I'm having is if I put the following around a form input element the validation fails:

我遇到的问题是,如果我将以下内容放在表单输入元素周围,则验证失败:

<div style="display:none;"><input type="text" name="test" /></div>

I need this because I'm using other UI control layers for the input elements and don't want them visible.

我需要这个,因为我正在为输入元素使用其他UI控制层,并且不希望它们可见。

It works on inline and block elements, but I need it to be hidden. Is there anyway to get around this?

它适用于内联和块元素,但我需要隐藏它。反正有没有解决这个问题?

Thanks for any feedback

感谢您的任何反馈

Update:

更新:

I'm mostly validating select option fields, with django (ie: {{form.select_option_element}} )

我主要使用django验证选择选项字段(即:{{form.select_option_element}})

So effectively:

如此有效:

<div style="display:none;">
    {{form.select_option_element}}
</div>

...doesn't work

......不起作用

Right after posting I seem to solve it with:

发布后我似乎解决了它:

<div style="visibility: hidden; height: 0;">
     {{form.select_option_element}}
</div>

It then allows me to validate the field.

然后它允许我验证该字段。

5 个解决方案

#1


44  

From the 1.9.0 Change Log of jQuery Validate:

从jQuery验证的1.9.0更改日志:

  • Fixed #189 - :hidden elements are now ignored by default
  • 已修复#189 - :隐藏元素现在默认被忽略

To turn it back on simply do the following:

要重新打开它,只需执行以下操作:

$(document).ready(function(){    
    $.validator.setDefaults({
        ignore: []
    });
});

Make sure that this appears before you call the actual validation plugin in your code.

在您的代码中调用实际验证插件之前,请确保显示此内容。

I hope this helps!

我希望这有帮助!

#2


3  

I like the answer of @dSquared but unfortunately 'ignore'-property will be reseted for every form's validator on page. In some cases it doesnt need.

我喜欢@dSquared的答案但不幸的是'ignore'属性将在页面上为每个表单的验证器重置。在某些情况下,它不需要。

I use this way:

我用这种方式:

$(document).ready(function () {

    var $form = $("#some-form");

    $form.validate().settings.ignore = []; // ! Say to validator dont ignore hidden-elements on concrete form.

    $('#button-send').click(function () {
        if ($form.valid()) { .. }
    });

    // !! apply plugin's initializers which will hide origin elements (it can be CLEditor or Choosen plugins)
});

#3


1  

Have you tried adding the style attribute to the input element? So instead of wrapping it with a div, try:

您是否尝试将style属性添加到input元素?所以不要用div包装它,而是尝试:

<input type="text" name="test" value="" style="display: none;" />

#4


0  

There are two things you can do.

你可以做两件事。

1) you can statically set value, which does not fail validation, for this input field like

1)您可以为此输入字段静态设置值,该值不会失败验证

<div style="display:none;"><input type="text" name="test" value="default" /></div>

2) If you want to neglate this value in your validation method.

2)如果要在验证方法中忽略此值。

I would appreciate if you could provide more detail code.

如果您能提供更详细的代码,我将不胜感激。

#5


0  

Another form to solve this problem is changing the display: none to visibility: hidden.

解决此问题的另一种形式是将display:none更改为visibility:hidden。

Eg: <input type="text" name="test" value="" style="visibility: hidden;" />

例如:

#1


44  

From the 1.9.0 Change Log of jQuery Validate:

从jQuery验证的1.9.0更改日志:

  • Fixed #189 - :hidden elements are now ignored by default
  • 已修复#189 - :隐藏元素现在默认被忽略

To turn it back on simply do the following:

要重新打开它,只需执行以下操作:

$(document).ready(function(){    
    $.validator.setDefaults({
        ignore: []
    });
});

Make sure that this appears before you call the actual validation plugin in your code.

在您的代码中调用实际验证插件之前,请确保显示此内容。

I hope this helps!

我希望这有帮助!

#2


3  

I like the answer of @dSquared but unfortunately 'ignore'-property will be reseted for every form's validator on page. In some cases it doesnt need.

我喜欢@dSquared的答案但不幸的是'ignore'属性将在页面上为每个表单的验证器重置。在某些情况下,它不需要。

I use this way:

我用这种方式:

$(document).ready(function () {

    var $form = $("#some-form");

    $form.validate().settings.ignore = []; // ! Say to validator dont ignore hidden-elements on concrete form.

    $('#button-send').click(function () {
        if ($form.valid()) { .. }
    });

    // !! apply plugin's initializers which will hide origin elements (it can be CLEditor or Choosen plugins)
});

#3


1  

Have you tried adding the style attribute to the input element? So instead of wrapping it with a div, try:

您是否尝试将style属性添加到input元素?所以不要用div包装它,而是尝试:

<input type="text" name="test" value="" style="display: none;" />

#4


0  

There are two things you can do.

你可以做两件事。

1) you can statically set value, which does not fail validation, for this input field like

1)您可以为此输入字段静态设置值,该值不会失败验证

<div style="display:none;"><input type="text" name="test" value="default" /></div>

2) If you want to neglate this value in your validation method.

2)如果要在验证方法中忽略此值。

I would appreciate if you could provide more detail code.

如果您能提供更详细的代码,我将不胜感激。

#5


0  

Another form to solve this problem is changing the display: none to visibility: hidden.

解决此问题的另一种形式是将display:none更改为visibility:hidden。

Eg: <input type="text" name="test" value="" style="visibility: hidden;" />

例如: