Magento 2: Ajax validation in checkout page

Question

So I need to add an AJAX validation for the field VAT number of shipping and billing address in checkout page, which is basically like this:

define([], function () {
    return {
        validate:function (value){
            $.ajax({
                url: 'path/to/the/validation/controller',
                type: 'get',
                dataType: 'json',
                cache: false
            }).done(function (response) {
                return response;
            }).fail(function () {
                return false;
            });

            return false;
        }
    };
});

But as you can see, this validation won't work because AJAX async is involved, so it will always return false regardless the validation result.

I want to avoid async: false because it causes bad user experience as it freeze the page while validating, so I come up with these work around, but none works:

1. I create a custom error message span below the VAT field, and set the message myself in AJAX callback:

define([], function () {
    return {
        validate:function (value){
            $.ajax({
                url: 'path/to/the/validation/controller',
                type: 'get',
                dataType: 'json',
                cache: false
            }).done(function (response) {
                if (response) {
                    $('.vat-error-message span').html('');
                    window.vatValidation = true; // When submit form, I check this value to accept or rejecting the form submit.
                } else {
                    $('.vat-error-message span').html($t('Invalid VAT Number'));
                    window.vatValidation = false;
                }
            }).fail(function () {
                $('.vat-error-message span').html($t('Invalid VAT Number'));
                window.vatValidation = false;
            });

            return true;
        }
    };
});

Problem: many other events that validating the form such as saving new shipping or billing address still expecting return result from the validator, which is always true regardless the validation result.

2. I found a validation method named remote where you basically add it into data-validate which is pretty good: (more information here: Magento 2 - jQuery validation remote method)

<input name="vat_id" data-validate="{'remote':'path/to/the/validation/controller'}"/>

Problem: It only works outside checkout page, e.g edit address in account page. Seem like in checkout page, they use a whole different set of validation rule which isn't included remote.

My only hope now is trying to get remote works in checkout page by calling it in my custom validation rule like this:

$.validation.methods['remote'].call();

However, it's just an idea and I haven't found a way to get it works.

Answer 1

I know this is an old question, but recently I was in the same situation of adding an ajax based validation on the checkout page to validate the postcode again the selected state using a 3rd party API. To achieve this, I have to add an ajax based validation rule on the checkout page and below is the code snippet I used to achieve this.

define([
'Magento_Ui/js/lib/validation/validator',
'jquery',
'jquery/ui',
'jquery/validate',
'mage/translate'], function(validator,$){
'use strict';

return function() {
    validator.addRule(
        'postcode_state', function (value, element) {
            var isValid = false;
            window.errorMsg = "";
            var data = {}; //Pass the data that you want
            $.ajax({
                url: BACKEND-URL, // you backend url
                data: data,
                type: "POST",
                showLoader: true,
                async: false, //This is required so that it wait for the response
                success: function (response) {
                    window.errorMsg = response.error; //setting error message returned from the server
                    isValid = response.success; //true or false returned from the server
                }
            });
            return isValid;
        }, function () {  //using a callback method to wait for the server response
            return window.errorMsg; //used window.errorMsg, if you want to use any other technique you are good to go
        });
}});

Do let me know in case if you face any issue, will try to resolve your issues.

Thanks

Answer 2

You can use the jQuery validation messages for all fields, I think this is the best option. I also applied these.