using jquery validate remote on multi-select element

Question

I've been using the jquery validate for a while now and have just recently started working with the remote option.

When I use remote validation with an input element, it works great (email, phone #, etc). I'm now trying to have it work with a multiple select element. I don't understand when the validation via remote gets fired. The first time I make a selection in the element, it fires off the remote and it does what it's supposed to do. Then when I Ctrl-Click, Shift-Click, or single click elsewhere, it doesn't always perform the validation and call the remote ajax method.

<!-- 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(); }
                }
            }
        }
    },

I also tried setting onfocusout validate option to true to force the validation when the blur event occurred. No change.

I went so far as to hook into both the blur and change event handlers and try element as seen below, but that didn't work either.

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

My question is this: when does the remote validation get called for a multiple select element? Can I force it to validate on both blur and whenever a change is made in the multi-select?

Thanks in advance

score 3 · Accepted Answer · edited May 23 '17 at 10:34

I have found an answer after debugging into jquery.validate.js. The answer has a couple parts.

The first part is that the validate plugin caches the previous value for performance reasons (thanks to Jörn Zaefferer for the hint in the right direction - With JQuery Validation Plugin, I want to change the remote validation method).

The second is that when going through the remote entry point, the value of the current selection to compare against the previous value is always just the first element that is selected, not the entire list of elements. Therefore, when you change the select list selections but don't change the first selected item, the validate plugin doesn't recognize a change in the selected items.

The solution was to clear the previous value myself in a change handler as Jörn recommended (recommended for a different purpose, but works here as well.)

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

And because I want the remote validation done every time I change selection (via Ctrl-click, Shift-click, or single click) without having to blur the element, the change handler has been extended a little to the following:

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

using jquery validate remote on multi-select element

1 Answers1