javascript - jQuery 验证插件不验证不是表单输入的元素

Question

我需要使用 jQuery 验证插件验证组合框组件:jqxComboBox。该组件应用于 div。所以定义

<div id="component_id" />

$( "#component_id" ).jqxComboBox({...});

$("#component_id" ).rules( "add", {
    required: true,                  
    messages:{
        required: "Field is required"
    }
});

抛出以下异常:无法读取未定义的属性“nodeType”。我认为这应该是因为我在 div 上应用了验证规则。

该组件生成一个隐藏的输入类型来保存选定的值。我还尝试在该隐藏组件上应用验证规则，但这不起作用:当隐藏没有值时也会提交表单。

$('input[type=hidden][name=myName]').rules( "add", {
    required: true,                  
    messages:{
        required: "Field is required"
    }
});

有人可以给我一些关于如何解决这个问题的提示吗？

Answer 1

引用OP:

“我需要使用 jQuery 验证插件验证组合框组件:jqxComboBox。该组件应用于 div。”

正如您所知，您不能使用 jQuery Validate 来验证 div 。您只能验证input , select和textarea <form> 内的元素容器。

引用OP:

“此组件生成一个隐藏的输入类型来保存选定的值。我也尝试在该隐藏组件上应用验证规则，但这不起作用:当隐藏没有值时也会提交表单。”

将值放入隐藏的输入元素中是一种可接受的解决方法。

但是，默认情况下，jQuery Validate 插件将忽略所有隐藏的输入元素。只需更改 ignore选项 []为了忽略“无”。设置ignore .validate() 内的选项与您的任何/所有其他选项一起调用。

$('#yourform').validate({
    // your other options, rules and callbacks,
    ignore: []  // <- ignore nothing - validate hidden elements
});

文档:http://jqueryvalidation.org/validate/#ignore