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 to the server to see if the email address is 'available'. In addition, I need to send an id parameter which the server requires. The id parameter is embedded in my form in the 'host' field.

So, I have tried using the Parsley DOM API as follows:

        <input type="text" class="form-control" tabindex="15" id="email" name='email'
            data-parsley-type="email" data-parsley-type-message="Must be a valid email format"
            data-parsley-required="true" data-parsley-required-message="Email is required"
            data-parsley-remote="/invitation/allowed"
            data-parsley-remote-options='{ "type": "get", "data" : { "id": function() {return $("#host").val(); } }}'>

In the final line of the API config I have tried various combinations to get the value of the host field into my URL. These include escaping the quotes in the function; and proving 'host' (or '#host') as the value of the id property. In each case I can get only my email address passed in the URL.

Note that I can pass a literal no problems (for example { "id": "TestTest" }).

I have also tried using javascript as follows:

<script type="text/javascript" src="/js/parsley.remote.js"></script>
<script type="text/javascript">$('#employee-form').parsley({})</script>

<script type="text/javascript">
    $('#email').parsley().addConstraint('remote',
    {
        url: '/invitation/allowed',
        type: 'GET',
        data: {
            id: function () { return $('#host').val() }
        }
    })
</script>

When I do this I have two problems: the id is not set in the URL, and also the base url is incorrect - it calls the address of the current page (not /invitation/allowed).

This question, which was asked a few hours ago, is similar: Remote validation for a field which depends on others

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.