jquery DIV 中的字段与 display:none 中的验证

Question

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

ignore: []

但这并没有改变任何东西。看看 class 的 div 命名为 'moreurlinput'，他有内联样式 display:none，但是如果你把它改成 display:inline (block,table等）出现验证错误

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/

Answer 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 无效。您不应使用 "self-closing" 标签，因为 <button> 元素本身是一个具有结束标签的容器。

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

应该...

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

jquery DIV 中的字段与 display:none 中的验证

jquery validation when field in DIV with display:none

jquery

jquery-validate