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

4
  • try using prop() in place of attr() like $('input[name*="company"]').prop('required',true);
    – Mac
    Commented Sep 24, 2018 at 10:40
  • aria-required is not working
    – butching
    Commented Sep 24, 2018 at 10:50
  • @butching try this magento.stackexchange.com/questions/231397/… Commented Sep 24, 2018 at 10:51
  • yeah i saw that already but same as in the comments, i need to view the complete plugin to understand that
    – butching
    Commented Sep 24, 2018 at 10:53

1 Answer 1

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 and acknowledge you have read our privacy policy.

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