How to use jQuery to remotely validate a field that depends on another field in the form?

Question

I have a form in which I am using remote validation to check if an email address already exists in the database. However, the catch is that on this form, the user can select between several different "groups", and each group has its own distinct set of email addresses (thus the same email can exist once in each group).

The group selection is a dropdown on the form, and the email address is an input field with remote validation. I have a couple issues. First, I have set up my remote rule like this:

remote: {
    url: 'remote_script.php',
    data: {  group_id:  $('select.group_id').val() }
}

However, this seems to statically set the group_id parameter to whatever the first value in the select is. Meaning, if I change the select, then trigger the remote validation again, the group_id parameter does not change

First, how can I make this parameter dynamic, depending on the value of a select in the form?

Secondly, how do I manually trigger the remote validation on the email address field? When the group_id select is changed, I want to re-trigger the remote validation on the email address field (without changing the value of the field). I tried using

$(selector).validate().element('.email_addr')

But this appears to only trigger the standard validation (required, email), and not the remote call.

Lint

@Adrian appreciate the edit, but I think the second part of the title is actually the more difficult part to figure out! I think for search purposes having some reference in the title to that would be more useful. In retrospect I should have made it two questions, but that was five years ago... – Lint

Answer 1

Found the solution to the second part of my question:

 $(".email_addr").removeData("previousValue");

will remove the cache of the remote request, and allow the remote request to be triggered again, using .element().

Thus my code is as follows:

$("select.group_id").change(function() {
    $(".email_addr").removeData("previousValue"); //clear cache when changing group
    $("#customer_form").data('validator').element('.email_addr'); //retrigger remote call
    //my validator is stored in .data() on the form
});

Solution was found here: solution

The first part of my question was answered originally by @Jeffery To

All that needs to be done is to change the value of the parameter to a function, rather than just a value. Jeffery's example is copied below for future googlers:

remote: {
  url: 'remote_script.php',
  data: {
    group_id: function () {
        return $('select.group_id').val();
    }
  }
}

Lint

this doesn't seem to work for me: #11479883 – Scatterbrain

additionally, where does the 'validator selector come from? see my question in the comment above. – Scatterbrain

@Jason, the validator selector is just something I did for convenience. I instantiate the validator like so: v = $('#form').validate({ ... });, then I just store v in the data on the form, so I can access it later. – Lint

This undocumented removeData method just saved my life ! – Haversack

thats helped me after 2 hours of digging – Thankyou

Answer 2

From the second example for remote it looks like functions (evaluated during validation) can be used for data, so

remote: {
    url: 'remote_script.php',
    data: {
        group_id: function () {
            return $('select.group_id').val();
        }
    }
}

should work.

For your second question, did you try passing the validation rules to validate()?

Peshitta

Yep, you are right, that works for the dynamic data. I return the original validator from the .validate() call, and then do something like v.element('.email_addr'), but I can't seem to get that to work. Do you know if .element() will ever trigger a remote call? – Lint

Nevermind, I figured it out, I had an error in my selector. .element() DOES retrigger the remote call, just needed the original validator object, which, in retrospect, makes complete sense. – Lint

Hmm, on further testing, it seems the 2nd part of the question is still unsolved - can't seem to trigger the remote call on an unchanged field. Will mark this question complete and ask it separately. Thanks – Lint

I had to append async: false in the remote options in order for it to work for me. – Kovacs

@KevinJhangiani - did you ever figure this out? I'm having the same issues - I can make multiple remote calls, unless the field comes back as valid - in that case, it never makes a remote call again if the field is changed. – Scatterbrain

@Scatterbrain - Yeah, see my accepted answer above. The key is to call this: $(".email_addr").removeData("previousValue"); on the field in question - after removing this data, the remote call will re-execute – Lint

@Jason, sorry I just saw your other comments now, I'm reading and looking into it...the code I use above does work for me, though it's possible the validator js library has been updated since then (I have not upgraded it since the time of this question) – Lint