Magento 2: Custom Checkout Field Validation

Question

I have a module already built for ExtraFee, I just want to add the checkbox below for terms & conditions so I found a template and added a checkbox like this:

<div class="field amexfee-item-element" visible="visible" css="$data.additionalClasses">
    <label class="label amexfee-title" text="label"></label>
    <div class="control">
        <p if="description" text="description"></p>
        <render args="elementTmpl"/>
    </div>
    <!-- ko if: element.error() -->
    <div class="field-error" data-bind="attr: { id: element.errorId }, text: element.error" generated="true"></div>
    <!-- /ko -->

    <!-- Custom Checkbox -->
    <input data-validate='{"required":true}' type="checkbox" id="customCheckbox" name="customCheckbox" value="" data-bind='checked: CheckVals'/>
    <label for="customCheckbox">I accept Terms & Condition for Insurance product.</label><br>
    <!-- /Custom Checkbox -->
</div>

I also get its value in a js file like this:

define([
    'jquery',
    'Magento_Ui/js/form/element/abstract',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/quote',
    'Amasty_Extrafee/js/action/select-fee',
    'Magento_Ui/js/lib/validation/validator',
    'Amasty_Extrafee/js/model/tax-utils',
    'ko',
    'uiComponent',
    'mage/url',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/totals'
], function ($, AbstractField, priceUtils, quote, selectFeeAction, validator, taxUtils, ko, Component, url, modal, totals) {
    'use strict';

    return AbstractField.extend({
        defaults: {
            template: 'Amasty_Extrafee/fee/item',
            templatesChildComponents: {
                radio: 'Amasty_Extrafee/fee/item/radio',
                checkbox: 'Amasty_Extrafee/fee/item/checkbox',
                dropdown: 'Amasty_Extrafee/fee/item/dropdown'
            },
            listens: {
                value: 'setFee'
            },
            frontendType: 'dropdown',
            feeId: null,
            options: [],
            value: []
        },
        translation: {
            error: $.mage.__('Please select at least one option for %1.')
        },
        taxUtils: taxUtils,

        /**
         * @returns {Item} Chainable.
         */
        initObservable: function () {
            this._super()
                .observe({
                    CheckVals: ko.observable(true) //default checked(true)
                });

            var checkVal=0;
            self = this;
            this.CheckVals.subscribe(function (newValue) {
                console.log('success');
                console.log(totals.totals().total_segments[3]);
                if(newValue) {
                    checkVal = 1;
                    var popup = $('<div class="terms-and-condition"/>').html(
                        '<p for="ins-terms">Terms & Condition</p>'
                        ).modal({
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        modalClass: 'ins-terms-popup',
                        height: 'auto',
                        width: 'auto',
                        title: $.mage.__("Terms & Conditions"),
                        buttons: [
                            {
                                text: 'Proceed',
                                click: function() {
                                    this.closeModal();
                                }
                            }
                        ]
                    });
        
                    popup.modal('openModal');
                } else {
                    checkVal = 0;
                }
            });

            this._super()
                .observe([
                    'options'
                ]);

            return this;
        },

        /**
         * @returns {Object} Validate information.
         */
        validate: function () {
            var value = this.value(),
                result = validator(this.validation, value, this.validationParams),
                message = '',
                isValid = this.disabled() || !this.visible() || result.passed;

            if (this.required() && !value) {
                isValid = false;
            }

            if (!isValid) {
                message = this.translation.error.replace('%1', this.label);
            }

            this.error(message);
            this.error.valueHasMutated();
            this.bubble('error', message);

            if (this.source && !isValid) {
                this.source.set('params.invalid', true);
            }

            return {
                valid: isValid,
                target: this
            };
        },

        /**
         * @param {String|Array} optionId
         * @returns {void}
         */
        setFee: function (optionId) {
            var optionsIds = Array.isArray(optionId) ? optionId : [ optionId ];

            selectFeeAction.selectFee(this.feeId, optionsIds);
        },

        /**
         * @returns {Item} Chainable.
         */
        initConfig: function () {
            this._super();

            if (Object.keys(this.templatesChildComponents).indexOf(this.frontendType) !== -1) {
                this.elementTmpl = this.templatesChildComponents[this.frontendType];
            }

            return this;
        }
    });
});

This is what it look like:

I just wanted to add validation for my checkbox, I'm not very good at KO so if anyone knows please help me out.

Answer 1

Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields. You can do this by creating a plugin and inserting the fields in Layout AfterProcessor.

namespace/module/etc/frontend/di.xml ...

<type name=""""Magento\Checkout\Block\Checkout\LayoutProcessor"""">
    <plugin name=""""rewrite-street"""" type=""""Namespace\Module\Model\Checkout\LayoutProcessorPlugin"""" sortOrder=""""10""""/>
</type>

...

And the LayoutProcessorPlugin should look like this: (Please see in my attachment) https://pastebin.com/AE6AiLxk

You can insert in the validation array any validation rule you want.