Skip to content

Magento 2.4 checkout. Company necessary is country_id IT

Hi I have a problem with onepagecheckout.
I need that if country_id is IT , field Company must be required.

I used validator.addRule and these are my files.
But modules doesn’t work.

Please halp me, thanks.

view/frontend/layout/checkout_index_index.xml
frontend/web/js/validate-company.js
frontend/web/js/view/checkout/validate-company.js

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Artmediastudio_Validate::js/validate-company.js"/>
    </head>
    <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="company" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="customScope" xsi:type="string">shippingAddress</item>
                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                        <item name="validation" xsi:type="array">
                                                                            <item name="validate-company" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

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

    validator.addRule(
        'validate-company',
        function (value, params, additionalParams) {
            var countryField = $('select[name="country_id"]').val();
            if (countryField === 'IT') {
                return value.length > 0;
            }
            return true;
        },
        $t('Company is required for customers in Italy.')
    );
});

define([
    'jquery',
    'Magento_Checkout/js/view/shipping'
], function ($, Component) {
    'use strict';

    return Component.extend({
        initialize: function () {
            this._super();
            this.initCompanyValidation();
        },

        initCompanyValidation: function () {
            var self = this;
            $(document).on('change', 'select[name="country_id"]', function () {
                self.validateCompanyField();
            });
            self.validateCompanyField();
        },

        validateCompanyField: function () {
            var countryField = $('select[name="country_id"]').val();
            var companyField = $('input[name="company"]');

            if (countryField === 'IT') {
                companyField.attr('data-validate', '{required:true}');
            } else {
                companyField.removeAttr('data-validate');
            }
        }
    });
});