jquery - 在多选元素上使用 jquery 验证远程

Question

我一直在使用jquery validate已经有一段时间了，最​​近才开始使用 remote选项。

当我使用带有输入元素的远程验证时，效果很好(电子邮件、电话号码等)。我现在尝试让它与多个选择元素一起使用。我不明白何时通过远程验证被触发。当我第一次在元素中进行选择时，它会触发 Remote 并执行其应该执行的操作。然后，当我按住 Ctrl 键单击、按住 Shift 键单击或单击其他位置时，它并不总是执行验证并调用远程 ajax 方法。

<!-- HTML snippet -->
<form id="edit_user_form" action="" method="post">
    <input type="text" name="username" id="edituser_username"/><br/>
    <select name="roles" id="edituser_roles" size="5" multiple="multiple"></select>
</form>

// jquery snippet
$('#edit_user_form').validate({
    rules: {
        username: { required: true },
        roles: {
            required: true,
            remote: {
                type: "POST",
                url: "/AdminJson/CheckRolesAllowed",
                dataType: "json",
                data: {
                    roles: function () { return $("#edituser_roles").val(); }
                }
            }
        }
    },

我还尝试将 onfocusout 验证选项设置为 true 以在模糊事件发生时强制进行验证。没有变化。

我竟然同时连接了 blur和 change事件处理程序并尝试 element如下所示，但这也不起作用。

$("#edituser_roles").change(function () {
    $("#edit_user_form").validate().element("#edituser_roles");
});
$("#edituser_roles").blur(function () {
    $("#edit_user_form").validate().element("#edituser_roles");
});

我的问题是这样的:何时为多选元素调用远程验证？我可以强制它在模糊和多选中进行更改时进行验证吗？

提前致谢

Answer 1

在调试 jquery.validate.js 后我找到了答案。答案有几个部分。

第一部分是验证插件出于性能原因缓存先前的值(感谢 Jörn Zaefferer 提供了正确方向的提示 - With JQuery Validation Plugin, I want to change the remote validation method )。

第二个是，当遍历远程入口点时，与前一个值进行比较的当前选择的值始终只是选择的第一个元素，而不是整个元素列表。因此，当您更改选择列表选项但不更改第一个选定项目时，验证插件无法识别选定项目中的更改。

解决方案是按照 Jörn 的建议，在更改处理程序中自行清除先前的值(建议用于不同目的，但在这里也适用。)

$("#edituser_roles").change(function () {
    $("#edituser_roles").removeData("previousValue");
});

并且因为我希望每次更改选择(通过 Ctrl 键单击、Shift 键单击或单击)时都完成远程验证，而不必模糊元素，因此更改处理程序已稍微扩展为以下内容:

$("#edituser_roles").change(function () {
    $("#edituser_roles").removeData("previousValue");
    $("#edit_user_form").validate().element("#edituser_roles");
});