当DIV中的字段显示为jquery验证时：无

【问题标题】：jquery validation when field in DIV with display:none当DIV中的字段显示为jquery验证时：无
【发布时间】：2015-01-10 00:32:05
【问题描述】：

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

ignore: []

但这不会改变任何东西。查看类名为 'moreurlinput' 的 div，他得到了 inline 样式 display:none，但如果将其更改为 display:inline (block,table etc.) 则会出现验证错误。

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/

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

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

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

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

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

工作演示：http://jsfiddle.net/Lprn89o8/4/

另一种解决方案是将display:none 移动到input 元素，让div 保持可见。

替代方案：http://jsfiddle.net/Lprn89o8/5/

编辑：

button 元素的 HTML 无效。您不应该使用“自关闭”标签，因为 <button> 元素本身是一个具有关闭标签的容器。

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

应该是……

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

【讨论】：