Checkout shipping additional hidden field validation

Question

I've added hidden field to shipping section of checkout. If field is visible - validation works, but if I make it hidden - any validation is missing.

Need to prevent going further from shipping to payment by clicking "Next" button and display some error message or alert to user.

Is there way to make this via LayoutProcessor?

Or to extend magento validation in my module for this purpose?

Other versions will be helpful also.

UPD: Maybe this will be helpful for answer. Right now trying to do validation similar to email field at checkout. The idea is next. Create custom form (like email field located inside separate form) and validate it according to this doc http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html#template

<?php

namespace Modules\Deliverydate\Model\Checkout;

class LayoutProcessorPlugin
{

    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['delivery_slot'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
//                'elementTmpl' => 'ui/form/element/date',
                'options' => [],
                'id' => 'enteredSlot'
            ],
            'dataScope' => 'shippingAddress.enteredSlot',
            'label' => 'Delivery Slot',
            'provider' => 'checkoutProvider',
            'visible' => false,
            'validation' => [
//                'required-entry' => true,
                'validate-no-empty' => true,
            ],
            'sortOrder' => 1,
            'id' => 'enteredSlot'
        ];

        return $jsLayout;
    }
}

Answer 1

You can simply create your own element with modified validation process for this purpose. In your extension create a new file view/base/web/js/form/element/custom.js with the following content:

define([
    'Magento_Ui/js/form/element/abstract',
    'Magento_Ui/js/lib/validation/validator'
], function (Abstract, validator) {
    'use strict';

    return Abstract.extend({
        validate: function () {
            var value   = this.value(),
                result  = validator(this.validation, value, this.validationParams),
                message = result.message,
                isValid = result.passed;

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

            if (!isValid) {
                this.source.set('params.invalid', true);
                alert('Please, specify a delivery date');
            }

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

Then, in LayoutProcessorPlugin change the 'component' value to the newly created element:

'component' => 'Modules_Deliverydate/js/form/element/custom'

In that way, you are able to extend the Abstract element and modify the "validate" method by removing field visibility checking etc. In this example the error message is being shown as an alert but you can use whatever you want. Hope it will help.