So I have these code to validate a generated field in the shipping address: VAT number
The requireJs: app/code/VendorName/Checkout/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Ui/js/lib/validation/validator': {
'VendorName_Checkout/js/validation/validator-mixin': true
}
}
}
};
Validation logic: app/code/VendorName/Checkout/view/frontend/web/js/validation/validator-mixin.js
/** vat validation method */
define([
'jquery'
], function ($) {
'use strict';
return function (validator) {
validator.addRule(
'validate-vat-number',
function (value) {
//Validation Logic
},
$.mage.__("Invalid Vat Number")
);
return validator;
};
});
And adding the rule to the field: app/code/VendorName/Checkout/Plugin/Block/Checkout/LayoutProcessorPlugin.php
<?php
namespace VendorName\Checkout\Plugin\Block\Checkout;
use Magento\Checkout\Block\Checkout\LayoutProcessor;
/**
* Class LayoutProcessorPlugin
* @package VendorName\Checkout\Plugin\Block\Checkout
*/
class LayoutProcessorPlugin
{
/**
* @param LayoutProcessor $subject
* @param $result
* @return mixed
*/
public function afterProcess(
LayoutProcessor $subject,
$result
) {
$vatAdditionalRules = ['validate-vat-number' => true];
$result['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children']
['vat_id']['validation'] = $vatAdditionalRules;
return $result;
}
}
The code works well, the validation show error text right when I input any character into the field. This is all good and fun until I add AJAX to my validation logic. Due to AJAX and calling API to the third party and shit, the validation is pretty slow and it doesn't go well with the on-key-up style of Magento validation: If you're typing the VAT number instead of copying it, it will freeze at the 2nd character for a few secs, then freeze at 3rd character for a few sec, and so on.
So now I want to disable that on-key-up validation on my VAT number field and only trigger the validation on the event "change". Is there a clean Magento-way to achieve it?