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: enter image description here

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.