jQuery验证，当DIV中的字段与display:none一起使用时 [英] jquery validation when field in DIV with display:none

问题描述

我在display:none的字段上遇到问题... 我需要单击提交表单按钮后，即使要验证的字段位于带有display:none设置的div中，也会出现错误消息. 我找到了解决方案，并尝试将其添加到jQuery代码设置中

I got problem on fields with display:none ... I need that after click on submit form button the error message will appear even if the field to validate is in div with display:none setting. I find solution and try to add to the jQuery code setting

ignore: []

但是这不会改变任何东西.用名为"moreurlinput"的类查看div，他获得了内联样式display:none，但是如果将其更改为display:inline(块，表等)，则会出现验证错误.

but this not change anything. Look at the div with class named 'moreurlinput', he got inline style display:none, but if you change this to display:inline (block,table etc.) the error of validation appear.

html

<form id="post" action="http://m.onet.pl" method="post" class="validatedForm">
<div class="moreurlinput" style="display:none">
    <input class="moreurl center" type="text" name="moreurl" id="moreurl" />
</div>
<div>
    <button type="submit" />Add</button>
</div>
</form>

jquery

jQuery('.validatedForm').validate({
errorElement: "div",
errorClass: 'validate-error',
rules: {
    "moreurl": {
        required: true
    }
},
messages: {
    moreurl: "Please define 'More' URL value"
}

});

此处: http://jsfiddle.net/Lprn89o8/2/

推荐答案

验证工作完全按预期进行.您的整个问题是，错误元素也位于隐藏的div的内部中，因此无法看到该消息.

Validation is working exactly as expected. Your whole problem is that the error element is also inside of your hidden div so the message cannot be seen.

解决方案是使用errorPlacement选项将消息 放置在隐藏的div之外.

The solution is to use the errorPlacement option to place the message outside of your hidden div.

errorPlacement: function(error, element) {
    error.insertAfter($(element).parent());
},

您还需要ignore: []选项，以便不忽略任何内容并验证您的隐藏元素.

You also need the ignore: [] option so that nothing is ignored and your hidden element is validated.

工作示例: http://jsfiddle.net/Lprn89o8/4/

Working DEMO: http://jsfiddle.net/Lprn89o8/4/

另一种解决方案是将display:none移至input元素，使div保持可见.

An alternative solution would simply move display:none to the input element, allowing the div to remain visible.

替代方法: http://jsfiddle.net/Lprn89o8/5/

Alternative: http://jsfiddle.net/Lprn89o8/5/

编辑:

button元素的HTML无效.您不应使用自动关闭"标签，因为<button>元素本身是具有关闭标签的容器.

The HTML for your button element is invalid. You should not use a "self-closing" tag since the <button> element itself is a container that has a closing tag.

<button type="submit" />Add</button>

应该是...

<button type="submit">Add</button>

这篇关于jQuery验证，当DIV中的字段与display:none一起使用时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！