Skip to content

Custom validation for vat_id in checkout shipping address form

I want to create a custom validation with logic for the vat_id field. I tried all the ways I found online and no one seems to work. I created a module specifically to add the validation, and I tried with the official documentation, and with other methods that I found online that use LayoutProcessor.php, so far no one has worked for me.

The code that I have right now is following the documentation:

appcodeMMCValidateVatetcdi.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
</config>

appcodeMMCValidateVatetcmodule.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MMC_ValidateVat" setup_version="1.0.0">
    </module>
</config>

appcodeMMCValidateVatviewfrontendlayoutcheckout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock  name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="vat_id" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="nif-validator" xsi:type="array">
                                                                            <item name="component" xsi:type="string">MMC/ValidateVat/js/view/nif-validation</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

appcodeMMCValidateVatviewfrontendwebjsmodelnif-validator.js

define(
['mage/translate', 'Magento_Ui/js/model/messageList'],
function ($t, messageList) {
    'use strict';
    return {
        validate: function () {
            const isValid = false; //Put your validation logic here

            if (!isValid) {
                messageList.addErrorMessage({ message: $t('a possible failure message ...  ') });
            }

            return isValid;
        }
    }
}
);

appcodeMMCValidateVatviewfrontendwebjsviewnif-validation.js

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/payment/additional-validators',
    'MMC/ValidateVat/js/model/nif-validator'
],
function (Component, additionalValidators, nifValidator) {
    'use strict';
    additionalValidators.registerValidator(nifValidator);
    return Component.extend({});
}
);

appcodeMMCValidateVatregistration.php

<?php

MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'MMC_ValidateVat',
__DIR__
);

I spent too many hours researching and trying solutions to this thing that should be simple and I don’t know what I’m missing. I hope someone can help.