Clientseitige Validierung

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 Sie eine bessere Benutzererfahrung, indem Sie schnell auf Browserebene reagieren. Hier werden alle Benutzereingaben im Browser des Benutzers selbst validiert. Für die clientseitige Validierung ist keine Rückfrage beim Server erforderlich, so das der 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 Sie unmittelbar vor dem Wechsel zum nächsten Feld eine Fehlermeldung aus. So ist eine Korrektur möglich, bevor er das Formular sendet.

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 dies bösartige Daten sind! 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 gleichzeitig 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-Ansicht an und übernimm diese Änderungen in deine Entwicklungsversion.

// https://github.com/astridx/boilerplate/compare/t11a...t11b.diff

diff --git a/src/administrator/components/com_foos/forms/foo.xml b/src/administrator/components/com_foos/forms/foo.xml
index b3f1ceff..ca0f0090 100644
-- a/src/administrator/components/com_foos/forms/foo.xml
++ b/src/administrator/components/com_foos/forms/foo.xml
@@ -14,6 +14,7 @@
 			name="name"
 			type="text"
 			validate="Letter"
			class="validate-letter"
 			label="COM_FOOS_FIELD_NAME_LABEL"
 			size="40"
 			required="true"
diff --git a/src/administrator/components/com_foos/tmpl/foo/edit.php b/src/administrator/components/com_foos/tmpl/foo/edit.php
index 1531aec6..70e17c50 100644
-- a/src/administrator/components/com_foos/tmpl/foo/edit.php
++ b/src/administrator/components/com_foos/tmpl/foo/edit.php
@@ -18,7 +18,8 @@

 $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' : '';
diff --git a/src/media/com_foos/joomla.asset.json b/src/media/com_foos/joomla.asset.json
index 21642a25..86b65d9d 100644
-- a/src/media/com_foos/joomla.asset.json
++ b/src/media/com_foos/joomla.asset.json
@@ -5,6 +5,17 @@
   "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",
diff --git a/src/media/com_foos/js/admin-foos-letter.js b/src/media/com_foos/js/admin-foos-letter.js
new file mode 100644
index 00000000..7091b51d
-- /dev/null
++ b/src/media/com_foos/js/admin-foos-letter.js
@@ -0,0 +1,19 @@
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));
});

Schritt für Schritt

Neue Dateien

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

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

Auch hier geht es um das Prinzip. Die Qualtiät der Validierung spielt keine Rolle. Wieder sind lediglich Zahlen verboten.

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

src/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.

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

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

src/administrator/components/com_foos/forms/foo.xml

Wir ergänzen class="validate-letter", so weiß Joomla, welche CSS-Klasse gepürft wird.

https://github.com/astridx/boilerplate/blob/baea984ae9f1e1ddb7d9f63b78dad48d2c77c525/src/administrator/components/com_foos/forms/foo.xml

...
<field
	name="name"
	type="text"
	validate="Letter"
	class="validate-letter"
	label="COM_FOOS_FIELD_NAME_LABEL"
	size="40"
	required="true"
/>
...

src/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.

src/media/com_foos/joomla.asset.json

...
{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "com_foos",
  "version": "1.0.0",
  "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",
      "uri": "com_foos/admin-foos-modal.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "defer": true
      }
    }
  ]
}
...

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 components Ordner in den components 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

Geänderte Dateien

Übersicht

Vor oder zurück ...