jquery.validate, jquery.metadata and html5 data

Question

我正在研究使用html5 data-属性将验证规则传递给jquery.validate，作为插件更新HTML5支持的临时措施。 我正在使用jquery 1.4.2、jquery.validate 1.7和jquery.validate 2.1。 在我的HTML中，我正在使用类似于以下代码：

<input name="foo" type="text" data-validate="{required:true,digits:true}" />

在我的jQuery中，我正在做以下操作：

<script type="text/javascript">
$.metadata.setType ("html5");
$(function ()
{
    $('#myForm').validate ({debug:true});
});
</script>

这只会导致一个错误信息，validator.methods[method]未定义

我对带有data-validate属性的元素进行了metadata()操作，并获得了一个名为validate的对象，其中设置了我的属性，因此我知道metadata正在查找属性并从中加载，但是validate插件似乎无法处理它。如果我回到class="{validate:{...}}"并注释掉配置metadata使用HTML 5的行，它将按预期工作。

我做错了什么，还是validate和/或metadata插件存在问题？

- GordonM

Answer 1

如果有人使用更新的jQuery版本以及jQuery Validate和jQuery元数据插件，并且寻找如何将它们一起使用的相关文档时，所有我找到的文档都已经过时了。尽管jQuery Validate插件仍然可以使用jQuery Metadata，但是较新版本的jQuery Metadata不再支持“html5”作为类型，因为jQuery现在本地支持HTML5数据属性作为元数据源。不过，jQuery Validate还没有更新以使用此功能。

解决这个问题（至少在jQuery Validate更新以支持使用data-属性内置元数据支持之前）的方法是使用“attr”类型并直接指向您的数据属性。例如：

$.metadata.setType("attr", "data-validate");
$("form").validate();

请注意，不需要传递“meta”标签，因为元数据库直接访问正确的属性来读取值。这是一个修改过的jsFiddle，使用了所有库的更新版本：

http://jsfiddle.net/Wcu4L/

- Michael McGuire

---

我能给这个点赞100吗？我花了半天时间尝试弄清如何从类属性中获取元数据，但这条评论解决了问题。谢谢！ - Matt

同意Matt的观点，这确实有很大帮助。惊讶的是没有看到数据属性被实现在插件本身中... - daddywoodland

解决一个未记录的问题的绝妙方案，让人抓狂。能够点赞到100分，加一！ - Sebastian Zaklada

Answer 2

尝试：

$.metadata.setType("html5");
$('#myForm').validate({
    meta: "validate"
});

http://jsfiddle.net/petersendidit/5YND2/

- PetersenDidIt

---

这似乎有效，不过我得在周一上班时试一下以确保。另外，感谢提供 jsfiddle 网站的链接，我得记住它。看起来是个有用的资源。 - GordonM

确实在实际代码中运行良好，非常感谢。 - GordonM