Validieren von Formularelementen, die über UI-Komponenten erstellt wurden

10

Ich versuche, eine benutzerdefinierte Validierung für eines meiner Magento 2-Formularfelder durchzuführen, die über UI-Komponenten generiert wird.
Ich weiß, dass ich den erforderlichen Wert durch Hinzufügen eines validationElements in der Konfiguration erreichen kann.
So was:

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

Was muss ich in das validationElement einfügen und wo platziere ich den js-Code, der mein Feld basierend auf benutzerdefinierten Bedingungen validieren soll?
Zum Beispiel möchte ich, dass es einem bestimmten regulären Ausdruck entspricht.

magento2 uicomponent form-validation Marius
quelle

Antworten:

11

Grundsätzlich konnte ich die Antwort darauf aus dem letzten Kommentar finden, den Marius gab.

Wie er sagte, wird die Validierung für Formulare, die von oder mit Hilfe der UI-Komponente generiert wurden, vom /Magent‌​o/Ui/view/base/web/j‌​s/lib/validation/val‌​idator.js'Modul' validiert . Jetzt hat dieses Modul eine addRule()Funktion, die genau das ist, was wir brauchen.

Nach dem Hinzufügen der benutzerdefinierten Validierung in der XML Ihres Formulars:

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

Wir müssen ein Skript erstellen, das dieses 'Modul' erfordert, und mit Hilfe der addRule unsere benutzerdefinierte Validierung hinzufügen:

[Namspace] / [Modul] / view / [Bereich] /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.')
            );
});

Das reicht jetzt nicht. Wir müssen diese Datei auf der Seite einfügen, die das Formular enthält, das wir validieren möchten.

Wir tun dies auf folgende Weise: Nehmen wir an, wir möchten dies zu customer_index_edit hinzufügen, wobei der [Bereich] ungefähr [adminhtml] ist, und wir fügen die folgende Datei hinzu: [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>

Vergessen Sie nicht, den statischen Inhalt der Cache-Bereitstellung zu bereinigen.

Hoffe das hilft.

vitoriodachef
quelle
4

Soweit ich verstanden habe

So können Sie Ihre benutzerdefinierte Validierung wie folgt hinzufügen:

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

Hier REGEXPmuss also ein regulärer Ausdruck sein.

Dann müssen Sie Ihr eigenes benutzerdefiniertes Validierungsskript deklarieren, um damit umgehen zu können 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: es kann params.test(value)statt seinvalue.test(params)

Raphael beim digitalen Pianismus
quelle
Das ist sinnvoll, aber wie füge ich meinen js-Validator in die Seite ein? Oder wo soll ich meine Validierung js ablegen? Es ist nicht so, dass ich <script scr=""irgendwo auf der Seite verwenden kann.
Marius
@Marius kannst du nicht einfach das JS in deine Seite aufnehmen? Ich meine, eine JS-Datei erstellen und in den Kopf aufnehmen?
Raphael bei Digital Pianism
hmm ... sollte das nicht irgendwie über require js gemacht werden, wenn ich meine komponente benutze? Ich weiß es nicht. Ich werde das versuchen, aber es fühlt sich irgendwie schmutzig an. Zum Beispiel ist die Standard-Validierungs-js-Datei nicht im Kopf enthalten. Nur require.js und requirejs-config.
Marius
@Marius ja ich habe wahrscheinlich zu schnell gesprochen. Immer noch nicht an alle
gewöhnt,
2
Ich glaube, ich habe etwas gefunden, bin mir aber nicht sicher. Die Verwendung $.validator.addMethodfunktioniert möglicherweise nur für Formulare, die nicht über UI-Komponenten erstellt wurden. Für Komponenten wird die Validierung über https://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/validator.jsdiese Verwendungen durchgeführt https://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js. Ich denke, ich muss einen Weg finden, dies zu erweitern.
Marius