Parsley.js Dont use remote validation, if value is empty

Question

I've got the following problem. Here is the input I want to validate

 <input type="text" name="vatid" data-parsley-remote data-parsley-remote-validator='vatid'/>

and this is the asyncValidator

        $('[name="vatid"]').parsley()
          .addAsyncValidator('vatid', function (xhr) {
            return 404 === xhr.status;
          }, confighandler.getConfig().apiUrl + '/checkvatids');

My problem is, that also if the user doesn't enter a value parsley sends an request (on form submit) to the api and then the errors-mesage are triggered. How can I avoid this and only validate if the user has entered something?

Update

big thanks to milz, I've got the following solution and it works like charm :)

define([
    'jquery',
    'confighandler',
    'requirejs-i18n!nls/labels',
    'parsleyjs'
], function($, confighandler, Labels) {
    'use strict';
    return {
        initialize: function() {
            // add custom validators
            window.ParsleyValidator
                .addValidator('vatid', function(val) {
                    var isvalid;
                    $.ajax({
                        url: confighandler.getConfig().apiUrl + '/checkvatids/' + val,
                        dataType: 'json',
                        type: 'get',
                        async: false,
                        success: function(response) {
                            isvalid = (response.result.data.isvalid === 'true') ? true : false;
                        },
                        error: function() {
                            isvalid = false;
                        }
                    });
                    return isvalid;
                }, 32).addMessage('de', 'vatid', Labels.validation.vatid);
        }
    };
});

Answer 1

You can accomplish that, but you can't use ParsleyRemote. The problem with remote validators is that you cannot verify if the value is empty or not before the remote ajax call is made.

A possible solution to this issue is adding a custom validator with .addValidator and then place an ajax call.

In this case you don't even need to check if the input has any content because the validator is only executed when the input is not empty.

<input type="text" name="vatid" data-parsley-vatid />

<script>
$(document).ready(function() {
    window.ParsleyValidator
        .addValidator('vatid', function (value, requirement) {
            var response = false;

            $.ajax({
                url: confighandler.getConfig().apiUrl + '/checkvatids',
                data: {vatid: value},
                dataType: 'json',
                type: 'get',
                async: false,
                success: function(data) {
                    response = true;
                },
                error: function() {
                    response = false;
                }
            });

            return response;
        }, 32)
        .addMessage('en', 'vatid', 'Vatid is invalid.');
});
</script>

You can also check the following question that can provide adicional information: Parsley.js Trigger Error on AJAX