Validando elementos de formulário criados por meio de componentes da interface do usuário

10

Estou tentando ter uma validação personalizada para um dos meus campos de formulário do Magento 2 que são gerados por meio de componentes da interface do usuário.
Eu sei que posso criar o valor necessário adicionando um validationitem na configuração.
Como isso:

   <field name="title">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Some label here</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">whatever</item>
                <item name="sortOrder" xsi:type="number">999</item>
                <item name="dataScope" xsi:type="string">whatever</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item><!-- this validates it as required -->
                </item>
            </item>
        </argument>
    </field>

O que preciso adicionar dentro do validationitem e onde coloco o código js que deve validar meu campo com base em condições personalizadas?
Por exemplo, quero que ele corresponda a um certo regex.

magento2 uicomponent form-validation Marius
fonte

Respostas:

11

Basicamente, eu consegui encontrar a resposta para isso no último comentário que Marius deu.

Como ele disse, a validação para formulários gerados por ou com a ajuda do componente da interface do usuário é validada pelo /Magent‌​o/Ui/view/base/web/j‌​s/lib/validation/val‌​idator.js'módulo'. Agora, este módulo tem uma addRule()função que é exatamente o que precisamos.

Depois de adicionar a validação personalizada no xml do seu formulário:

<field name="title">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Some label here</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">whatever</item>
                <item name="sortOrder" xsi:type="number">999</item>
                <item name="dataScope" xsi:type="string">whatever</item>
                <item name="validation" xsi:type="array">
                    <item name="custom-validation" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>

Precisamos criar um script que exija esse 'módulo' e, com a ajuda do addRule, adicionamos nossa validação personalizada:

[Namspace] / [Module] / view / [area] /web/js/our_custom_validation.js

   require(
        [
            'Magento_Ui/js/lib/validation/validator',
            'jquery',
            'mage/translate'
    ], function(validator, $){

            validator.addRule(
                'custom-validation',
                function (value) {
                    //return true or false based on your logic

                }
                ,$.mage.__('Custom Validation message.')
            );
});

Agora isso não é suficiente. Devemos incluir esse arquivo na página que contém o formulário que queremos validar.

Fazemos isso da seguinte maneira: Digamos que queremos adicionar isso ao customer_index_edit que a [área] será [adminhtml] e adicionamos o seguinte arquivo: [Namespace] / [Module] / view / adminhtml / layout / customer_index_edit .xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Namespace_Module::js/our_custom_validation.js"/>
    </head>
</page>

Não se esqueça de limpar seu cache e implantar conteúdo estático.

Espero que isto ajude.

vitoriodachef
fonte
4

Pelo que eu entendi

Portanto, você pode adicionar sua validação personalizada assim:

<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">true</item>
    <item name="validate-regexp" xsi:type="string">REGEXP</item>
</item>

Então, aqui REGEXPprecisa ser uma expressão regular.

Em seguida, você deverá declarar seu próprio script de validação personalizado para poder manipular validate-regexp

require([
'jquery', // jquery Library
'jquery/ui', // Jquery UI Library
'jquery/validate', // Jquery Validation Library
'mage/translate' // Magento text translate (Validation message translte as per language)
], function($){ 
$.validator.addMethod(
'validate-regexp', function (value, params) { 
return value.test(params); // Validation logic here
}, $.mage.__('Enter Valid Field'));

});

NB: pode ser em params.test(value)vez devalue.test(params)

Raphael na Digital Pianism
fonte
isso faz sentido, mas como incluo meu validador js na página? Ou onde devo colocar minha validação js? Não é como se eu pudesse usar <script scr=""em algum lugar da página.
Marius
@Marius, você não pode simplesmente incluir o JS na sua página? Quero dizer, criar um arquivo JS e incluí-lo na cabeça?
Raphael no Digital Pianism
hmm ... isso não deveria ser feito de alguma forma através de exigir js, ao usar meu componente? Eu não sei. Vou tentar isso, mas parece de alguma forma sujo. Porque, por exemplo, o arquivo js de validação padrão não está incluído no cabeçalho. Require.js e requirejs-config apenas.
Marius
@ Marius sim, eu provavelmente falei muito rápido. Ainda não é usado para todos aqueles exigem coisas
Raphael em Digital pianismo
2
Acho que encontrei algo, mas não tenho certeza. O uso $.validator.addMethodpode funcionar apenas para formulários que não são criados por meio de componentes da interface do usuário. Para os componentes ui, a validação é feita através https://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/validator.jsdesse uso https://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js. Eu acho que preciso encontrar uma maneira de estender isso.
Marius