Joomla 4.x-Tutorial - Entwicklung von Erweiterungen - Clientseitige Validierung

Ändere diesen Beitrag

Unser Ziel in diesem Teil: Wenn wir eine Zahl in das Namensfeld eingeben, wird unmittelbar nach dem Verlassen des Feldes eine Fehlermeldung angezeigt. Bei der serverseitigen Überprüfung wurde die Meldung erst ausgegeben, nachdem das Formular über die Schaltfläche Speichern an den Server gesendet wurde.

In der clientseitigen Validierung bieten wir eine bessere Benutzererfahrung, indem wir schnell auf Browserebene reagieren. Hier werden alle Eingaben im Browser des Benutzers sofort validiert. Für die clientseitige Validierung ist keine Rückfrage beim Server erforderlich, so das dieser und das Netzwerk entlastet werden. Diese Art der Überprüfung arbeitet auf der Browserseite mithilfe von Skriptsprachen wie JavaScript oder mit HTML5-Attributen.

Wenn der Benutzer beispielsweise ein ungültiges E-Mail-Format eingibt, geben wir unmittelbar nach dem Wechsel zum nächsten Feld eine Fehlermeldung aus. So ist zeitnah eine Korrektur möglich.

Meistens hängt die clientseitige Validierung davon ab, dass im Browser JavaScript aktiviert ist. Bei deaktiviertem JavaScript werden Benutzer-Eingaben ungeprüft zum Server gesandt. Es ist möglich, dass es sich hierbei um bösartige Daten handelt! Daher schützt die clientseitige Validierung die Nutzer deiner Komponente nicht sicher vor böswilligen Angriffen.

Da beide Validierungsmethoden (Server und Client) ihre eigene Bedeutung haben, wird empfohlen, sie nebeneinander zu verwenden. Die serverseitige Validierung ist sicherer - die clientseitige benutzerfreundlicher!

Dieser Teil behandelt die die clientseitige Validierung in Joomla 4.

Für Ungeduldige

Sieh dir den geänderten Programmcode in der Diff-Ansichtgithub.com/astridx/boilerplate/compare/t11a...t11b an und übernimm diese Änderungen in deine Entwicklungsversion.

Schritt für Schritt

In der nachfolgenden Übersicht sind die neu hinzugekommenen Dateien mit einem Hintergrund versehen und die geänderten umrandet.

Übersicht über die in diesem Kapitel bearbeiteten Dateien

Neue Dateien

Die clientseitige Validierung erfolgt über eine Klasse mithilfe einer JavaScript-Datei.

media/com_foos/js/admin-foos-letter.js

Auch hier geht es um das Prinzip, genau wie im vorhergehenden Kapitel. Die Qualtiät der Validierung ist Nebensache und ich wähle ein simples Beispiel. Zahlen sind im Textfeld für den Namen verboten. Astrid ist erlaubt. Astrid9 ist nicht erlaubt.

Im Beispiel nutze ich einen regulären Ausdruck. regex.test(value) gibt true zurück, wenn regex = /^([a-z]+)$/i ist und value keine Zahl enthält. Weitere Informationen zur Test-Methode findest du bei developer.mozilla.org.

media/com_foos/js/admin-foos-letter.js

// https://raw.githubusercontent.com/astridx/boilerplate/t11b/src/media/com_foos/js/admin-foos-letter.js

document.addEventListener('DOMContentLoaded', function () {
  'use strict'
  setTimeout(function () {
    if (document.formvalidator) {
      document.formvalidator.setHandler('letter', function (value) {
        var returnedValue = false

        var regex = /^([a-z]+)$/i

        if (regex.test(value)) returnedValue = true

        return returnedValue
      })
      //console.log(document.formvalidator);
    }
  }, 1000)
})

Geänderte Dateien

administrator/components/com_foos/ foos.xml

Im Installationsmanifest fügen wir <filename>joomla.asset.json</filename> ein, damit Joomla weiß, das die Datei joomla.asset.json zur Erweiterung gehört und ins media/com_foos Verzeichnis kopiert wird.

administrator/components/com_foos/ foos.xml

 		<folder>tmpl</folder>
 	</files>
     <media folder="media/com_foos" destination="com_foos">
		<filename>joomla.asset.json</filename>
 		<folder>js</folder>
     </media>
 	<!-- Back-end files -->

administrator/components/com_foos/ tmpl/foo/edit.php

Der Eintrag ->useScript('com_foos.admin-foos-letter'); fügt die JavaScript-Datei, welche für das Prüfen zuständig ist, zum Webasset-Manager hinzu.

administrator/components/com_foos/ tmpl/foo/edit.php

 $wa = $this->document->getWebAssetManager();
 $wa->useScript('keepalive')
	->useScript('form.validate');
	->useScript('form.validate')
	->useScript('com_foos.admin-foos-letter');

 $layout  = 'edit';
 $tmpl = $input->get('tmpl', '', 'cmd') === 'component' ? '&tmpl=component' : '';

administrator/components/com_foos/ forms/foo.xml

Wir ergänzen class="validate-letter", damit Joomla weiß, welche CSS-Klasse zu prüfen ist.

administrator/components/com_foos/forms/foo.xml

 			name="name"
 			type="text"
 			validate="Letter"
			class="validate-letter"
 			label="COM_FOOS_FIELD_NAME_LABEL"
 			size="40"
 			required="true"

media/com_foos/joomla.asset.json

Last but not least registrieren wir die neue Datei unter dem Namen com_foos.admin-foos-letter im Webasset-Manager.

media/com_foos/joomla.asset.json

"description": "Joomla CMS",
   "license": "GPL-2.0-or-later",
   "assets": [
   {
     "name": "com_foos.admin-foos-letter",
     "type": "script",
     "uri": "com_foos/admin-foos-letter.js",
     "dependencies": [
       "core"
     ],
     "attributes": {
       "defer": true
     }
   },
     {
       "name": "com_foos.admin-foos-modal",
       "type": "script",

Teste deine Joomla-Komponente

  1. Installiere deine Komponente in Joomla Version 4, um sie zu testen:

Kopiere die Dateien im administrator Ordner in den administrator Ordner deiner Joomla 4 Installation.
Kopiere die Dateien im media Ordner in den media Ordner deiner Joomla 4 Installation.

Eine neue Installation ist nicht erforderlich. Verwende die aus dem vorhergehenden Teil weiter.

  1. Öffne die Ansicht deiner Komponente im Administrationsbereich und erstelle ein neues Item oder editiere ein vorhandenes. Gib im Textfeld für den Titel dabei eine Zahl ein.
  2. Editiere danach ein anderes Feld, setze zum Beispiel den Zugriff auf Registered.
  3. Überzeuge dich davon, dass dir zu diesem Zeitpunkt eine Warnung angezeigt wird.

Joomla Validierung

Ändere diesen Beitrag

Comments