0

我有一个使用 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 中，设置 wrapper 时内容完全消失：'div' http://jsfiddle.net/tjans/cqXXu/44/

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

这是一个错误，还是有解决方法/更好的语法来做到这一点？

4

1 回答 1

1

您的问题是该插件也设置display:none在您的errorLabelContainer.

换一种方式试试...

HTML：

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

验证选项：

errorLabelContainer: '#ValidationErrors ul',

演示：http: //jsfiddle.net/uWVZ9/

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

于 2013-04-23T14:52:00.457 回答