如何在HTML 5中为有效标记添加自定义属性？

Question

我正在使用jQuery验证插件，并根据设计需要放置错误占位符。使用以下代码：

<label for="fav[]" class="error" generated="true"></label> <input id="field-11" name="fav[]" value="252483" type="checkbox"> <input id="field-12" name="fav[]" value="252484" type="checkbox">

但是客户端抱怨标记无效。以下是错误：

Attribute generated not allowed on element label at this point.
The for attribute of the label element must refer to a form control.

我使用的是HTML5，我知道在HTML 5中，我们可以通过data-{attribute}使用自定义属性。但是，由于generated是一个jquery验证插件属性，所以我们不能将data-附加到它。

那么，有人知道如何修复上面的w3验证错误吗？非常感谢你的帮助。

Answer 1

你可以通过消除你的“占位符”来解决你的问题.完全没有必要。jQuery验证插件会根据需要自动创建错误label标记。

如果希望label出现在输入之前，请使用回调函数.

$('#myform').validate({
    // your other options and rules,
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    }
});

演示： http://jsfiddle.net/8gQ7U/1/

默认情况下，label将有class="error"，但也可以使用errorClass选项来操作。重点是，您可以使用标记完全操作插件，而不必手动编写标记。

Quote OP:

“但是由于generated是一个jquery验证插件属性.”

检查版本1.11.1的源代码插件没有发现这样的事情。

generated属性过去是此插件的早期版本的一部分，但现在不再是了。

因此，如果仍然坚持手动编写自己的label标记，只要使用插件的1.11.1版本，就可以安全地消除generated属性。

演示(1.11.1): http://jsfiddle.net/8gQ7U/