Question

我有一个使用jQuery Validate验证的简单表单，我遇到了一个我从未见过的问题。我有一个包装在容器中的表单，该表单使用验证摘要进行验证，当您在其中一个成功验证然后选中标签的字段中输入某些信息时，容器的整个内容都会消失。我认为它与匹配表单所在容器的包装器属性有关。您可以在以下代码片段/ jsFiddles中看到此行为：

$('#form1').validate({
        wrapper: 'p',
        errorContainer: '#jserror',
        errorClass: 'jserror',
        errorLabelContainer: '#ValidationErrors',
        highlight: function(element, errorClass) {
            $(element).addClass('errorfields');
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass('errorFields');
        },
        rules : {},
        messages: {
            name: {
                required: "Name is required"
            },
            postSlug: {
                postSlug: "Can only contain numbers, letters, dashes and underscores",
                required: "Post slug is required"
            }
        }
    });// end validate

表单和标题用ul / li包装，设置包装时内容完全消失：'li' http://jsfiddle.net/tjans/cqXXu/41/

表单和标题用div包装，设置包装时内容完全消失：'div' http://jsfiddle.net/tjans/cqXXu/44/

表单和标题用div包装，包装器设置为'p'，一切正常。 http://jsfiddle.net/tjans/cqXXu/45/

这是一个错误，还是有一种解决方法/更好的语法来执行此操作？

Answer 1

您遇到的问题是该插件还在display:none的父级上设置了errorLabelContainer。

尝试这种方式......

<强> HTML ：

<div id="ValidationErrors" class="messageContainer validation" style="display:none;">
    <ul></ul>
</div>

验证选项：

errorLabelContainer: '#ValidationErrors ul',

DEMO：http://jsfiddle.net/uWVZ9/

这个问题与你的问题无关，但我也会删除空的rules: {} ...这绝不是一个好主意，因为你的规则已经与HTML内联定义，所以它完全是多余的。 / p>

jQuery Validate - 表单在成功时消失

1 个答案: