2

On Magento 2.2.3 and I have an issue regarding the terms and conditions validation on checkout. If you have two different payment method, you select one you click place order you will have the error message asking the user to check the T&C checkbox. Then you select the other payment method click on the place order button and Magento won't display the error message even if you don't check the T&C checkbox.

Here's the files I tried to update :

checkout-agreements.html

<div data-role="checkout-agreements">
<div class="checkout-agreements" data-bind="visible: isVisible">
    <!-- ko foreach: agreements -->
        <!-- ko if: ($parent.isAgreementRequired($data)) -->
        <div class="checkout-agreement required">
            <input type="checkbox" class="required-entry"
                   data-bind="attr: {
                                'id': $parent.getCheckboxId($parentContext, agreementId),
                                'name': 'agreement[' + agreementId + ']',
                                'value': agreementId
                                }"/>
            <label data-bind="attr: {'for': $parent.getCheckboxId($parentContext, agreementId)}">
                <button type="button"
                        class="action action-show"
                        data-bind="click: function(data, event) { return $parent.showContent(data, event) }"
                        >
                    <span data-bind="html: checkboxText"></span>
                </button>
            </label>
        </div>
        <!-- /ko -->
        <!-- ko ifnot: ($parent.isAgreementRequired($data)) -->
        <div class="checkout-agreement">
            <button type="button" class="action action-show"
                    data-bind="click: function(data, event) { return $parent.showContent(data, event) }">
                <span data-bind="html: checkboxText"></span>
            </button>
        </div>
        <!-- /ko -->
    <!-- /ko -->
    <div id="checkout-agreements-modal" data-bind="afterRender: initModal" style="display: none">
        <div class="checkout-agreements-item-content" data-bind="html: modalContent"></div>
    </div>
</div>

agreement-validator.js

define([
'jquery',
'mage/validation'
], function ($) {
'use strict';

var checkoutConfig = window.checkoutConfig,
    agreementsConfig = checkoutConfig ? checkoutConfig.checkoutAgreements : {},
    agreementsInputPath = '.payment-method._active div.checkout-agreements input';

return {
    /**
     * Validate checkout agreements
     *
     * @returns {Boolean}
     */
    validate: function () {
        var isValid = true;

        if (!agreementsConfig.isEnabled || $(agreementsInputPath).length === 0) {
            return true;
        }

        $(agreementsInputPath).each(function (index, element) {
            if (!$.validator.validateSingleElement(element, {
                errorElement: 'div'
            })) {
                isValid = false;
            }
        });

        return isValid;
    }
};

});

Thanks !

Your Answer

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

Browse other questions tagged or ask your own question.