Question

我想使用jQuery Validation插件为每个错误消息创建一个项目符号点。

如果至少有一个错误，我想附加一系列项目符号，每个错误都有一个项目符号。

errorPlacement: function (error, element) {
                  if(!$(".erorsbox")){
                    $(".last").append('<div class="errorsbox"></div>"')
                  } else {
                    $(".errorsbox").append("<li>"+error+"</li>");
                  }
               }

Answer 1

我想使用jQuery Validation插件为每个错误消息创建一个项目符号点。

然后errorPlacement不是正确的方法。 errorPlacement仅用于操作HTML标记，该标记用于通常出现在每个元素旁边的所有单个错误消息。

如果要创建所有邮件的列表，则需要使用errorLabelContainer和wrapper选项。

errorLabelContainer将所有消息放入指定容器内的单个无序列表（ul），wrapper将每条消息放入列表项（li）元素中。只需使用errorLabelContainer，默认消息就不会再出现在每个元素旁边。

$('#myform').validate({
    rules: {
        ....
    },
    errorLabelContainer: "#messageBox",
    wrapper: "li"
});

DEMO：jsfiddle.net/uc70fncs/

修改：

这是一个有争议的问题，因为errorPlacement不是正确的方法，但是，就原来的功能不起作用而言，请参阅下面的评论......

你不能像这样测试元素的存在......

if (! $(".erorsbox")) { ...

由于该元素不存在，$(".erorsbox")只会为您提供空 jQuery对象，该对象在条件内始终为true。因此(! $(".erorsbox"))无论是否存在，总是都是false。

通常不需要测试对象的存在并以编程方式创建它......只需将空容器元素提前放入标记中即可。在需要之前它不会占用空间。

但是，如果您仍然坚持使用jQuery测试元素是否存在，您可以use length：if ($(".erorsbox").length) { ...

您在上面的选择器中将errorsbox拼错为erorsbox。

此行中"之后您有一个迷路双引号</div> ...

$(".last").append('<div class="errorsbox"></div>"')

error参数不会像这样工作......

$(".errorsbox").append("<li>" + error + "</li>");

error参数表示一个jQuery对象，在您的标记中，它将呈现为<li>[object Object]</li>。要访问错误消息文本，您可以使用error.text()。

修正上述所有错误后：

errorPlacement: function(error, element) { if (! $(".errorsbox").length) { $(".last").append('<div class="errorsbox"></div>') } else { $(".errorsbox").append("<li>" + error.text() + "</li>"); } }

jsfiddle.net/gan5eb5v/

现在它正在工作，但不是很令人满意，因为append()被errorPlacement点击每blur keyup错误消息会无限重复}和click事件。

为获得最佳效果，simply use errorLabelContainer and wrapper as noted above。

jQuery验证项目符号

1 个答案: