0

I added a checkbox and i want to make the company required if that checkbox is checked, how can i do that? this is my js code

define([
   'ko',
   'uiComponent',
   'jquery'
], function (ko, Component, $) {
   "use strict";

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

           $(document).on("click", "#require-company-vat", function () {
             $('input[name="company"]').eq(0).closest('div.field').toggleClass('_required');

               if ($('input[name*="require-company-vat"]:checked')) {
                   $('input[name*="company"]').attr('aria-required', true);
               } else {
                   $('input[name*="company"]').removeAttr('aria-required');
               }

           });
           // component initialization logic
           return this;
       },
       defaults: {
           template: 'Chanz_CheckoutFields/require-company-vat'
       }

   });
});

aria-required is not working even if its already true

1

found a working sample.

Namespace/Modulename/view/frontend/requirejs-config.js

var config = {
config: {
    mixins: {
        'Magento_Ui/js/lib/validation/validator': {
            'Namespace_Modulename/js/validator-mixin': true
        }
    }
}
};

Namespace/Modulename/view/frontend/js/validator-mixin.js

define([
'jquery',
'moment'
], function ($, moment) {
'use strict';

return function (validator) {

    validator.addRule(
        'required-entry-if-checked',
        function (value) {
            if (!$('#checkbox-id').is(":checked")) {
                return true;
            } else {
                return !$.mage.isEmpty(value);
            }
        },
        $.mage.__('This is a required field.')
    );

    return validator;
};
});

Namespace/Modulename/view/frontend/layout/checkout_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="company" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">50</item>
                                                                <item name="validation" xsi:type="array">
                                                                    <item name="required-entry-if-checked" xsi:type="boolean">true</item>
                                                                    <item name="min_text_length" xsi:type="number">0</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

reference Add rule to rules.js Magento2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.