1

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?

2
  • You need to validate only on When the customer clicks next button ?
    – aravind
    Jul 22, 2019 at 11:52
  • @aravind - Yes. Basically i need it to function the same way as this working when customer is not logged in. Jul 22, 2019 at 12:00

0

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.