I've added a custom checkout field with validation in additional shipping area using a layout processor plugin.
Vendor\Module\Model\Checkout\LayoutProcessorPlugin.php
public function afterProcess (
\Magento\Checkout\Block\Checkout\LayoutProcessor $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?