Ttdfjt

I've added a custom checkout field with validation in additional shipping area using a layout processor plugin.

VendorModuleModelCheckoutLayoutProcessorPlugin.php

public function afterProcess (
 MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
 array $jsLayout
) 
 $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
 ['shippingAddress']['children']['shippingAdditional'] = [
 'component' => 'uiComponent',
 'displayArea' => 'shippingAdditional',
 'children' => [
 'terminal' => [
 'component' => 'Vendor_Module/js/methods/method',
 'config' => [
 'customScope' => 'shippingAddress',
 'template' => 'ui/form/field',
 'elementTmpl' => 'Vendor_Module/method',
 'options' => [],
 ],
 'dataScope' => 'shippingAddress.method_terminal',
 'label' => '',
 'provider' => 'checkoutProvider',
 'visible' => true,
 'validation' => [ 'select-terminal-required' => true ],
 'sortOrder' => 200,
 ]
 ],
 ];
 return $jsLayout;

In my phtml template file i have custom select that i wan't to validate:

<div data-bind="visible: selectedMethod () == 'vendor_terminal'">
 <label data-bind="i18n: 'Select'"></label>
 <select name="vendor-terminal" class="select-terminal-required" id="terminal-list" data-bind="html: getTerminalList ()">
 </select>
</div>

And I added custom validation mixin for this field.

require-config.js

var config = {
 config: 
 mixins: 
 'Magento_Ui/js/lib/validation/validator': 
 'Vendor_Module/js/validation-mixin': true
 ,
 

validation-mixin.js

define([
 'jquery',
 'Magento_Checkout/js/model/quote',
 'Magento_Ui/js/lib/validation/utils'
], function ($, quote, utils) 
 "use strict";
 return function ( validator ) 
 validator.addRule ( 'select-terminal-required', function () 
 var method = quote.shippingMethod();
 var validation = method.method_code === 'vendor_terminal' && utils.isEmpty($( '.select-terminal-required' ).val ());
 return !validation;
 , $.mage.__( 'Please select terminal.' ) );

 return validator;
 
);

My approach is that when a customer tries to go to the payment step without selecting any value it would fire a validation error. And it does until the customer is logged in and added his shipping address to he's address book. And it fires when a customer tries to change the address information inside checkout. I need validation that fires when a customer tries to go to the next step of checkout. Does anyone know any solution for this?