Parsley Remote and Additional Parameters

Question

I am trying to use the remote validator with Parsley and I can\'t seem to send additional data with the request. The field in question is an email field, and I want to send it

Answer 1

I was having the same trouble, wanting to pass an API key with each request, so I submitted a pull request with the feature. I think it'll be officially released very soon, see pull request here:

https://github.com/guillaumepotier/Parsley.js/pull/645

Answer 2

Parsley pull request #645 does not seem to address the problem fully. It allows you to specify ajax options in the addAsyncValidator() call, but those options are evaluated at the time of the call, not when the ajax request is made (e.g. the ajax data option is filled once on page load.) So any other form values passed in the request are not "live" they are whatever the values were at the time addAsyncValidator() was called. It seems we need to be able to specify a function for the data parameter. I made a small tweak to the Parsley.js code that allows that:

Existing code in validateString:

  // Merge options passed in from the function with the ones in the attribute
  var remoteOptions = $.extend(true, options.options || {}, Parsley.asyncValidators[validator].options);

Then right after that my addition:

  if (typeof remoteOptions.data === 'function') {
      remoteOptions.data = remoteOptions.data();
  }

So then in your code:

    <input type="text" ... id="host" data-parsley-remote="" data-parsley-remote-validator="invitation" />
    <input type="text" ... id="email" data-parsley-remote="" data-parsley-remote-validator="invitation" />

    <script>
    window.Parsley.addAsyncValidator(
        'invitation',
        function (xhr) {
            return xhr.status == 200;
        },
        '/invitation/allowed',
        {
            data: function () {
                return {
                    host: $('#host').val(),
                    email: $('#email').val();
                };
            }
        }
    );
    </script>

I don't see any other way of doing it except destroy the async validator and re-create it every time relevant form values change.

Note two things: (1) The function replaces the data not adds to it, and (2) it seems you would need to do the async validation if any of the relevant inputs change.