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


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
    ) {

        ['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;
  • Which is exactly your Magento version? Commented Aug 8, 2016 at 16:15
  • @KhoaTruongDinh 2.1.0
    – white-imp
    Commented Aug 9, 2016 at 8:49
  • I have created a checkbox in shipping form and its visible for logged in user but for guest its hidden, and I donot have any issues with validation. I followed oyenetwork.com/articles/… to customize my form. This process uses LayoutProcessor for customization. hope that helps
    – Ekta Puri
    Commented Aug 12, 2016 at 2:28
  • if not please, give some more details
    – Ekta Puri
    Commented Aug 12, 2016 at 2:28
  • @EktaPuri thanx. Also followed "Oye", but have a little different task. User select delivery date by checking one of buttons which mean he determines date and time range (it means I suggest user the set of available dates and time ranges). I need to handle this data and validate it. That's why I decided to put data into hidden field (or fields) and then handle it. And about "visible for logged user": when user already added his valid adress to system - visible field become invisible. So need to place fields here ['shippingAddress']['children']['shippingAdditional']['children']['delivery_date']
    – white-imp
    Commented Aug 12, 2016 at 14:08

1 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:

], 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.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.

  • Yaroslav, thanx a lot! Very hepfull!
    – white-imp
    Commented Aug 15, 2016 at 11:51
  • Yaroslav, do you know how to make validation work when user logged in? Shipping form replaced with address block with already set up parameters, but hidden fields present at page and no validation happens. Seems like validation absent at all.
    – white-imp
    Commented Aug 17, 2016 at 12:11
  • In addition to this, you can see "vendor/magento/module-ui/view/base/web/js/form/element/abstract.js" file, there you can see how it works in core & you can always override it according to requirements. Commented Apr 27, 2020 at 8:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.