JQuery验证未捕获的设置:无法读取未定义的属性‘TypeError’

Question

我在一个JQuery移动表单上使用JQuery Validate，该表单有一个动态创建的带有自动完成选项的列表视图。

一旦验证处于活动状态，如果您尝试在自动完成字段中键入内容，则会出现此错误。

我可以看到这个问题与jQuery Mobile创建的用于保存筛选器输入的表单有关，但是我不知道如何阻止jQuery validating验证字段。

我可以用JS Fiddle重现它

(按验证，然后在筛选器框中键入)

非常感谢您的任何建议

谢谢

<body>
<script>
    jQuery.validator.setDefaults({
        ignore: '[data-type="search"]'

    });
</script>
<form>
    <input required>
    <ul id="ac" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
        <li><a href="#">Acura</a>

        </li>
        <li><a href="#">Audi</a>

        </li>
    </ul>
    <button onclick="$('#ac').attr('data-role','listview');$('#ac').listview();$('form').validate();">Validate</button>
</form>

​

Answer 1

您的整个问题是由listview()函数创建的动态超文本标记语言引起的。检查DOM会发现这动态地创建了一个新的<form>容器。因为您已经将listview放在<form>容器中，所以现在<form></form>嵌套在<form></form>中，这是非常无效的超文本标记语言，这也是jQuery验证插件如此出人意料地工作的原因。

解决方案是将listview元素放在<form>容器之外。