jquery - 如何将 jQuery 验证与 "chosen"插件一起使用？

Question

我有一些 <select>使用 chosen plugin 输入我想在客户端验证为“必需”。由于“选择”隐藏了实际的选择元素并创建了一个带有 div 和跨度的小部件，因此原生 HTML5 验证似乎无法正常工作。表单不会提交(这很好)，但不会显示错误消息，因此用户不知道出了什么问题(这不好)。

我已经求助于 jQuery 验证插件(我最终还是计划使用它)，但到目前为止还没有成功。这是我的 test case :

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function(){
    $('select').chosen();
    $('form').validate();
});

这让 select通过一个空值，而不验证或显示错误消息。当我注释掉 chosen()线，它工作正常。

我如何验证 chosen()使用 jQuery 验证插件输入，并显示无效输入的错误消息？

Answer 1

jQuery 验证忽略隐藏元素，并且由于 Chosen 插件将 visibility:hidden 属性添加到 select，请尝试:

$.validator.setDefaults({ ignore: ":hidden:not(select)"})//所有选择

或

$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)"})//对于所有具有 .chosen-select 类的选择

在 validate() 函数之前添加这一行。它对我来说很好。