Validação adicional do campo oculto de envio do checkout

7

Adicionei um campo oculto à seção de entrega do checkout. Se o campo estiver visível - a validação funciona, mas se eu o ocultar - qualquer validação está faltando.

É necessário evitar ir mais longe do envio ao pagamento clicando no botão "Avançar" e exibir uma mensagem de erro ou alerta ao usuário.

Existe maneira de fazer isso via LayoutProcessor?

Ou para estender a validação magento no meu módulo para esse fim?

Outras versões também serão úteis.

UPD: Talvez isso seja útil para responder. No momento, estou tentando fazer a validação semelhante ao campo de e-mail no checkout. A idéia é a próxima. Crie um formulário personalizado (como um campo de email localizado em um formulário separado) e valide-o de acordo com este documento 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;
    }
}
imp-branco
fonte
Qual é exatamente a sua versão do Magento?
precisa saber é o seguinte
@KhoaTruongDinh 2.1.0
white-imp
Eu criei uma caixa de seleção no formulário de envio e é visível para o usuário conectado, mas para o hóspede está oculto e não tenho problemas com a validação. Segui oyenetwork.com/articles/… para personalizar meu formulário. Esse processo usa o LayoutProcessor para personalização. espero que ajude
Ekta Puri
se não por favor, dar mais alguns detalhes
Ekta Puri
@EktaPuri thanx. Também seguiu "Oye", mas tem uma tarefa um pouco diferente. O usuário seleciona a data de entrega marcando um dos botões, o que significa que ele determina a data e o intervalo de tempo (isso significa que sugiro ao usuário o conjunto de datas e intervalos de tempo disponíveis). Eu preciso lidar com esses dados e validá-los. Por isso, decidi colocar os dados em um campo oculto (ou campos) e depois manipulá-lo. E sobre "visível para o usuário logado": quando o usuário já adicionou seu endereço válido ao sistema - o campo visível fica invisível. Portanto, é necessário colocar os campos aqui ['shippingAddress'] ['children'] ['shippingAdditional'] ['children'] ['delivery_date']
white-imp

Respostas:

4

Você pode simplesmente criar seu próprio elemento com o processo de validação modificado para essa finalidade. Na sua extensão, crie um novo arquivo view/base/web/js/form/element/custom.jscom o seguinte conteúdo:

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
            };
        }
    });
});

Em LayoutProcessorPlugin, altere o valor 'component' para o elemento recém-criado:

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

Dessa forma, você pode estender o elemento Abstract e modificar o método "validate" removendo a verificação de visibilidade do campo etc. Neste exemplo, a mensagem de erro está sendo mostrada como um alerta, mas você pode usar o que quiser. Espero que ajude.

Yaroslav Rogoza
fonte
Yaroslav, muito obrigado! Muito feliz!
branco-imp
Yaroslav, você sabe como fazer a validação funcionar quando o usuário está logado? O formulário de remessa foi substituído pelo bloco de endereços com os parâmetros já configurados, mas os campos ocultos estão presentes na página e nenhuma validação acontece. Parece que a validação está ausente.
branco-imp
Além disso, você pode ver o arquivo "vendor / magento / module-ui / view / base / web / js / form / element / abstract.js", onde você pode ver como ele funciona no núcleo e sempre pode substituí-lo de acordo com os requisitos.
Kapil Yadav