使用 jquery easyui 验证组合框

Question

在我的页面中，有两个插件：jquery validate 和 jquery easyui .. 我使用 jQuery Validate 来验证表单中的数据输入。 并且我使用 jQuery EasyUI 自定义了一个组合框，允许在组合框中搜索数据。

所以，我把验证插件：

$("#form1").validate({
        rules:{
            filename:{
                required: true,
                minlength: 3
            },
            leia:{
                required: true
            }
        }
    });

没关系！是的工作！ 但是当我放置easyUI插件并在组合框'leia'中设置类时，'leia'的验证并没有更多工作。

<form id="form1" action="" method="post">
        <div>
                <label>Name:</label>
                <input type="text" name="filename" />
        </div>
        <div>
                <label>Leiame:</label>
                <select name="leia" class="easyui-combobox">
                        <option value=""></option>
                        <option value="1">Java</option>
                        <option value="2">C</option>
                        <option value="3">C#</option>
                        <option value="4">PHP</option>
                </select>
    </div>

        <input id="submit-go" type="submit" name="add" value="Add" />
</form>

当我在“leia”中下课时，验证有效！ 有人可以帮帮我吗？

提前谢谢你

Answer 1

您需要做的就是允许 jQuery Validate 在隐藏元素上执行。 EasyUI 只是隐藏了选择并用自己的元素替换它，但最终会在幕后更新您的选择。为了使这项工作：

$("#form").validate({
    ignore:'',//by default it ignores hidden inputs, so setting this to blank overrides that
    rules: {              
        leia: {
          required: true
        }
      },
      errorPlacement: function(error,element){
        if (element.hasClass('combo-value')){
            element.closest("span.combo").after(error);
        } else {
            element.after(error);   
    }   }       
});

我还添加了 errorPlacement 函数，它将错误消息移动到简单的 UI 标记之外（否则它会被隐藏在带有 overflow:hidden 设置的范围中）。

在这里查看它的工作原理：http://jsfiddle.net/ryleyb/B5XX7/2/