[Changed] Implement first working version of client-side validation.

tollwerk · Jun 30, 2023 · 08a7666 · 08a7666
1 parent fb6fcb3
commit 08a7666
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 6 deletions.
diff --git a/Classes/ViewHelpers/Form/Field/AdditionalAttributesViewHelper.php b/Classes/ViewHelpers/Form/Field/AdditionalAttributesViewHelper.php
@@ -41,8 +41,10 @@
 use Tollwerk\TwForms\Domain\Validator\ValidationErrorMapper;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Error\Result;
+use TYPO3\CMS\Extbase\Utility\DebuggerUtility;
 use TYPO3\CMS\Form\Domain\Model\Exception\FormDefinitionConsistencyException;
 use TYPO3\CMS\Form\Domain\Model\FormElements\AbstractFormElement;
+use TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement;
 use TYPO3\CMS\Form\Service\TranslationService;
 use TYPO3\CMS\Form\ViewHelpers\RenderRenderableViewHelper;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;

diff --git a/Resources/Private/Frontend/Partials/Form/Validation.html b/Resources/Private/Frontend/Partials/Form/Validation.html
@@ -40,6 +40,7 @@
                     value="{f:translate(key: 'LLL:EXT:tw_forms/Resources/Private/Language/locallang_forms.xlf:form.title.errors')}"/>
         <f:variable name="count" value="{f:count(subject: validationResults.flattenedErrors)}"/>
         <f:variable name="title" value="{twforms:form.title(form: form, pattern: pattern, errors: count)}"/>
+
         <nav class="Form__error-navigation" aria-label="{f:translate(key: 'LLL:EXT:tw_forms/Resources/Private/Language/locallang_forms.xlf:form.nav.errors')}" tabindex="-1"
              data-title-errors="{title.pattern}" data-title="{title.default} | tollwerk"
              {f:if(condition: hidden, then: ' hidden')}>

diff --git a/Resources/Private/Language/de.locallang_forms.xlf b/Resources/Private/Language/de.locallang_forms.xlf
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<xliff version="1.0">
+    <file source-language="en" datatype="plaintext" original="messages" date="2016-12-08T10:17:19Z"
+          product-name="tw_baylat">
+        <header/>
+        <body>
+            <trans-unit id="form.nav.errors">
+                <source>Problematic form fields</source>
+                <target>Fehlerhafte Formularfelder</target>
+            </trans-unit>
+            <trans-unit id="form.title.errors">
+                <source>%s Errors ⚠️ %s</source>
+                <target>%s Fehler ⚠️ %s</target>
+            </trans-unit>
+            <trans-unit id="form.required">
+                <source>(required)</source>
+                <target>(erforderlich)</target>
+            </trans-unit>
+            <trans-unit id="form.error">
+                <source>There are some problems with your input. Please check the fields below.</source>
+                <target>Es gab ein Problem mit Ihrer Eingabe. Bitte prüfen Sie die folgenden Felder.</target>
+            </trans-unit>
+            <trans-unit id="form.submit">
+                <source>Send</source>
+                <target>Absenden</target>
+            </trans-unit>
+
+            <!-- Error messages -->
+            <trans-unit id="validation.error.1580509091" approved="yes">
+                <source>Please fill out this field</source>
+                <target>Bitte füllen Sie dieses Feld aus</target>
+            </trans-unit>
+        </body>
+    </file>
+</xliff>
+
diff --git a/Resources/Private/Language/locallang_forms.xlf b/Resources/Private/Language/locallang_forms.xlf
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<xliff version="1.0">
+    <file source-language="en" datatype="plaintext" original="messages" date="2016-12-08T10:17:19Z"
+          product-name="tw_baylat">
+        <header/>
+        <body>
+            <trans-unit id="form.nav.errors">
+                <source>Problematic form fields</source>
+                <target></target>
+            </trans-unit>
+            <trans-unit id="form.title.errors">
+                <source>%s Errors ⚠️ %s</source>
+                <target></target>
+            </trans-unit>
+            <trans-unit id="form.required">
+                <source>(required)</source>
+                <target></target>
+            </trans-unit>
+            <trans-unit id="form.error">
+                <source>There are some problems with your input. Please check the following fields.</source>
+                <target></target>
+            </trans-unit>
+            <trans-unit id="form.submit">
+                <source>Send</source>
+                <target></target>
+            </trans-unit>
+
+            <!-- Error messages -->
+            <trans-unit id="validation.error.1580509091" approved="yes">
+                <source>Please fill out this field</source>
+                <target></target>
+            </trans-unit>
+        </body>
+    </file>
+</xliff>
+
diff --git a/Resources/Public/Javascript/000.polyfills.critical.js b/Resources/Public/Javascript/000.polyfills.critical.js
@@ -0,0 +1,72 @@
+/* eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["s", "e"] }] */
+(function iefe(w, e, s, svg) {
+    // NodeList.forEach
+    if (window.NodeList && !NodeList.prototype.forEach) {
+        NodeList.prototype.forEach = function foreEach(callback, thisArg) {
+            for (let i = 0; i < this.length; ++i) {
+                callback.call(thisArg || window, this[i], i, this);
+            }
+        };
+    }
+
+    // Element.matches
+    if (!e.matches) {
+        e.matches = e.matchesSelector
+            || e.mozMatchesSelector
+            || e.msMatchesSelector
+            || e.oMatchesSelector
+            || e.webkitMatchesSelector
+            || ((str) => {
+                const matches = (this.document || this.ownerDocument).querySelectorAll(str);
+                let i = matches.length - 1;
+                while ((i >= 0) && (matches.item(i) !== this)) {
+                    i -= 1;
+                }
+                return i > -1;
+            });
+    }
+
+    // Element.closest
+    if (!e.closest) {
+        e.closest = function closest(str) {
+            let el = this;
+            do {
+                if (el.matches(str)) return el;
+                el = el.parentElement || el.parentNode;
+            } while (el !== null && el.nodeType === 1);
+            return null;
+        };
+    }
+
+    // String.format
+    if (!s.format) {
+        s.format = function format(...args) {
+            return this.replace(
+                /{(\d+)}/g,
+                (match, number) => (typeof args[number] !== 'undefined' ? args[number] : match)
+            );
+        };
+    }
+
+    // classList support for IE11
+    if (!('classList' in svg)) {
+        Object.defineProperty(svg, 'classList', {
+            get() {
+                return {
+                    contains: (className) => this.className.baseVal.split(' ').indexOf(className) !== -1,
+                    add: (className) => this.setAttribute(
+                        'class',
+                        `${this.getAttribute('class')} ${className}`
+                    ),
+                    remove: (className) => {
+                        const removedClass = this.getAttribute('class')
+                            .replace(new RegExp(`(\\s|^)${className}(\\s|$)`, 'g'), '$2');
+                        if (this.classList.contains(className)) {
+                            this.setAttribute('class', removedClass);
+                        }
+                    }
+                };
+            }
+        });
+    }
+}(window, Element.prototype, String.prototype, SVGElement.prototype));
diff --git a/Resources/Public/Javascript/100.observer.critical.js b/Resources/Public/Javascript/100.observer.critical.js
@@ -46,7 +46,11 @@ window.tw_forms = tw_forms;
      * @param {Element} node Node
      */
     Observer.prototype.checkNode = function (node) {
-        this.observed.filter((observer) => node.matches(observer[0])).forEach((observer) => observer[1](node));
+        this.observed.filter((observer) => {
+            return node.matches(observer[0])
+        }).forEach((observer) => {
+                observer[1](node);
+            });
     };
 
     /**

diff --git a/Resources/Public/Javascript/110.formfield.critical.js b/Resources/Public/Javascript/110.formfield.critical.js
@@ -13,9 +13,6 @@
      * @constructor
      */
     function FormField(element) {
-
-        console.log('new FormField() for', element);
-
         this.element = element;
         this.element.enhancer = this;
         this.wrapper = this.element.closest('.FormField');

diff --git a/Resources/Public/Javascript/200.form.js b/Resources/Public/Javascript/200.form.js
@@ -30,8 +30,6 @@
             }
         }
 
-        console.log('this.fields', this.fields);
-
         this.initializeErrorSummary(this.element.querySelector('.Form__error-summary'));
     }
 
@@ -102,6 +100,7 @@
      * @return {boolean} No errors / form is valid
      */
     FormValidation.prototype.updateErrorSummary = function updateErrorSummary(errorMessages) {
+
         let errorCount = 0;
 
         // Remove all present errors