7

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;
    }
}
  • Which is exactly your Magento version? – Khoa TruongDinh Aug 8 '16 at 16:15
  • @KhoaTruongDinh 2.1.0 – white-imp Aug 9 '16 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 Aug 12 '16 at 2:28
  • if not please, give some more details – Ekta Puri Aug 12 '16 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 Aug 12 '16 at 14:08
3
+50

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.

  • Yaroslav, thanx a lot! Very hepfull! – white-imp Aug 15 '16 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 Aug 17 '16 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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