Metainformationen zur Seite

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

entwickler:web_ui_development_in_loxberry:validierung_von_eingabefeldern [2022/09/10 12:18] – angelegt - Externe Bearbeitung 127.0.0.1entwickler:web_ui_development_in_loxberry:validierung_von_eingabefeldern [2023/06/12 08:34] (aktuell) – Michael Schlenstedt
Zeile 1: Zeile 1:
-====== Validierung von Eingabefeldern  ======+====== Validierung von Eingabefeldern ======
  
 +Ab der Version 1.0 des LoxBerry gibt es eine neue Validierungsfunktion für Eingabefelder. 
  
 +Dafür gibt es das Script ''%%/opt/loxberry/webfrontend/html/system/scripts/validate.js%%'' von [[https://loxwiki.atlassian.net/wiki/people/6166fe40d9820f00703083d9?ref=confluence|Christian Wörstenfeld]].
  
-Ab der Version 1.0 des LoxBerry gibt es eine neue Validierungsfunktion für Eingabefelder.  +Die [[entwickler:web_ui_development_in_loxberry:deprecated_formularvalidierung_mit_loxberry|alte Version]] wird für eine Übergangszeit noch parallel benutzbar sein und später aus dem LoxBerry Core entfallen.
- +
-Dafür gibt es das Script''%% /opt/loxberry/webfrontend/html/system/scripts/validate.js%%'' von [[https://loxwiki.atlassian.net/wiki/people/6166fe40d9820f00703083d9?ref=confluence|Christian Wörstenfeld]].+
  
-Die [[entwickler:web_ui_development_in_loxberry:deprecated_formularvalidierung_mit_loxberry|alte Version]] wird für eine Übergangszeit noch parallel benutzbar sein und später aus dem LoxBerry Core entfallen.\\ 
 Sollte sie weiter benötigt werden, muss sie vom Plugin eingebunden werden.  Sollte sie weiter benötigt werden, muss sie vom Plugin eingebunden werden. 
  
Zeile 14: Zeile 13:
   * [[#ValidierungvonEingabefeldern-3)BeispielefürreguläreAusdrücke|3) Beispiele für reguläre Ausdrücke]]   * [[#ValidierungvonEingabefeldern-3)BeispielefürreguläreAusdrücke|3) Beispiele für reguläre Ausdrücke]]
   * [[#ValidierungvonEingabefeldern-4)Standard-Validierungen(Aliasspecial:)|4) Standard-Validierungen (Alias special:)]]   * [[#ValidierungvonEingabefeldern-4)Standard-Validierungen(Aliasspecial:)|4) Standard-Validierungen (Alias special:)]]
- 
  
 ===== 1) Voraussetzungen für die Validierung ===== ===== 1) Voraussetzungen für die Validierung =====
  
-Die Validierung benutzt ein klassisches Eingabefeld, und Prüft die Werte während der Eingabe.+Die Validierung benutzt ein klassisches Eingabefeld, und Prüft die Werte während der Eingabe. Ein Standardwert kann über das Template System übergeben werden. Hier im Beispiel ist es ''%%<TMPL_VAR DEFAULT_FROM_BACKEND>%%'' 
  
-Ein Standardwert kann über das Template System übergeben werden. Hier im Beispiel ist es ''%%<TMPL_VAR DEFAULT_FROM_BACKEND>%%''  +<code html4strict>
- +
-\\ +
- +
- +
-<code syntaxhighlighter-pre>+
 <input id='eingabefeld' type='hidden' value='<TMPL_VAR DEFAULT_FROM_BACKEND>' data-validation-error-msg="<TMPL_VAR ERR_FROM_BACKEND>" data-validation-rule="special:alphanumeric"> <input id='eingabefeld' type='hidden' value='<TMPL_VAR DEFAULT_FROM_BACKEND>' data-validation-error-msg="<TMPL_VAR ERR_FROM_BACKEND>" data-validation-rule="special:alphanumeric">
 </code> </code>
- 
- 
  
 Wichtig sind aber die folgenden Attribute: Wichtig sind aber die folgenden Attribute:
  
-<HTML><ul></HTML> +  * ''%%data-validation-error-msg%%'' - Dieses Attribut enthält die Fehlermeldung bei falschen Eingaben und sollte vom Backend aus der Sprachdatei befüllt werden. z.B. ''%%<TMPL_VAR ERR_FROM_BACKEND>%%'' 
-<HTML><li></HTML>''%%data-validation-error-msg%%'' - Dieses Attribut enthält die Fehlermeldung bei falschen Eingaben und sollte vom Backend aus der Sprachdatei befüllt werden. z.B. ''%%<TMPL_VAR ERR_FROM_BACKEND>%%''<HTML></li></HTML> +  * ''%%data-validation-rule%%'' - Dieses Attribut enthält einen regulären Ausdruck oder eine Standardregel welche mit ''%%special:%%'' beginnen muss, gegen den die Eingabe geprüft wird. Einige Beispiele findet ihr weiter unten. 
-<HTML><li></HTML>''%%data-validation-rule%%'' - Dieses Attribut enthält einen regulären Ausdruck oder eine Standardregel welche mit ''%%special:%%'' beginnen muss, gegen den die Eingabe geprüft wird. Einige Beispiele findet ihr weiter unten.<HTML></li></HTML> +  * ''%%data-validation-or%%'' - Optional: Wenn zwei Felder ODER-verknüpft werden sollen ist im Attribut ''%%data-validation-or%%'' das jeweilige Partnerobjekt einzutragen. Also zum Beispiel in Feld1: ''%%data-validation-or="#Feld2"%%'' 
-<HTML><li></HTML>''%%data-validation-or%%'' - Optional: Wenn zwei Felder ODER-verknüpft werden sollen ist im Attribut ''%%data-validation-or%%'' das jeweilige Partnerobjekt einzutragen. Also zum Beispiel in Feld1: ''%%data-validation-or="#Feld2"%%''\\ +  * ''%%data-validation-coloring%%'' - Optional: Wenn eine Validierung aber keine Einfärbung erfolgen soll, das Attibug ''%%data-validation-coloring="off"%%'' setzen.
-<HTML></li></HTML> +
-<HTML><li></HTML>''%%data-validation-coloring%%'' - Optional: Wenn eine Validierung aber keine Einfärbung erfolgen soll, das Attibug ''%%data-validation-coloring="off"%%'' setzen.<HTML></li></HTML> +
-<HTML><li></HTML><code> +
- +
-</code> +
- +
-<code> +
-   +
-</code> +
-<HTML></li></HTML><HTML></ul></HTML>+
  
 Der Ausdruck im Beispiel erlaubt die 26 großen und kleinen Buchstaben des Alphabets und alle Ziffern von 0 bis 9.  Der Ausdruck im Beispiel erlaubt die 26 großen und kleinen Buchstaben des Alphabets und alle Ziffern von 0 bis 9. 
  
-Weitere Infos und Tests gibt es bei https://regex101.com+Weitere Infos und Tests gibt es bei [[https://regex101.com]]
  
-Um die Validierung dann einzuschalten, muss sie in einem JavaScript-Block aktiviert werden.\\ +Um die Validierung dann einzuschalten, muss sie in einem JavaScript-Block aktiviert werden.\\  Dies sollte zur Sicherheit erst erfolgen, wenn die Seite geladen ist. Deshalb innerhalb der ''%%$( document ).ready%%'' Funktion.
-Dies sollte zur Sicherheit erst erfolgen, wenn die Seite geladen ist. Deshalb innerhalb der ''%%$( document ).ready%%'' Funktion.+
  
-<code syntaxhighlighter-pre>+<code javascript>
 <script> <script>
     $( document ).ready(function()     $( document ).ready(function()
Zeile 64: Zeile 44:
 </code> </code>
  
 +Da das INPUT Objekt mit seiner ''%%id%%'' angesprochen wird, muss vor die id Bezeichnung eine ''%%#%%'' eingefügt werden. Aus ''%%id='eingabefeld'%%'' wird also ''%%'#eingabefeld'%%''.\\  Mit validate_enable wird nur die Prüfung des Feldes eingeschaltet. Dies verhindert nicht das Absenden des Formulars mit ungewollten Werten. Um das zu Verhindern, muss zusätzlich die Funktion ''%%validate_chk_object%%'' aufgerufen werden.\\  Der Funktion''%% validate_chk_object%%'' wird ein Array der beim Absenden des Formulars zu prüfenden Objekte übergeben. (Mehrere Felder werden durch Komma getrennt)
  
- +<code javascript>
-Da das INPUT Objekt mit seiner ''%%id%%'' angesprochen wird, muss vor die id Bezeichnung eine ''%%#%%'' eingefügt werden. Aus ''%%id='eingabefeld'%%'' wird also ''%%'#eingabefeld'%%''.\\ +
-Mit validate_enable wird nur die Prüfung des Feldes eingeschaltet. Dies verhindert nicht das Absenden des Formulars mit ungewollten Werten. Um das zu Verhindern, muss zusätzlich die Funktion ''%%validate_chk_object%%'' aufgerufen werden.\\ +
-Der Funktion''%% validate_chk_object%%'' wird ein Array der beim Absenden des Formulars zu prüfenden Objekte übergeben. (Mehrere Felder werden durch Komma getrennt) +
- +
-<code syntaxhighlighter-pre>+
 // Ein Feld // Ein Feld
 validate_chk_object(['#eingabefeld']); validate_chk_object(['#eingabefeld']);
Zeile 77: Zeile 53:
 validate_chk_object(['#eingabefeld1','#eingabefeld2']); validate_chk_object(['#eingabefeld1','#eingabefeld2']);
 </code> </code>
- 
- 
  
 Sollen Eingabefelder durch veränderte Bedingungen auf der Webseite nicht mehr verhindern, dass das Formular abgesendet wird, können sie durch den Aufruf der Funktion''%% validate_clean_objects%%'' wieder freigegeben werden. Die Überprüfung und Einfärbung bleibt aktiviert aber bereits eingegebene Werte in diesen Objekten werden gelöscht.  Sollen Eingabefelder durch veränderte Bedingungen auf der Webseite nicht mehr verhindern, dass das Formular abgesendet wird, können sie durch den Aufruf der Funktion''%% validate_clean_objects%%'' wieder freigegeben werden. Die Überprüfung und Einfärbung bleibt aktiviert aber bereits eingegebene Werte in diesen Objekten werden gelöscht. 
  
-<code syntaxhighlighter-pre>+<code javascript>
 // Ein Feld // Ein Feld
 validate_clean_objects(['#eingabefeld']); validate_clean_objects(['#eingabefeld']);
Zeile 88: Zeile 62:
 validate_clean_objects(['#eingabefeld1','#eingabefeld2']); validate_clean_objects(['#eingabefeld1','#eingabefeld2']);
 </code> </code>
- 
- 
  
 Das ist alles was für eine Basis-Validierung benötigt wird. Das ist alles was für eine Basis-Validierung benötigt wird.
Zeile 97: Zeile 69:
 Soll eine andere Hintergrundfarbe benutzt werden, kann dies über JavaScript erfolgen: Soll eine andere Hintergrundfarbe benutzt werden, kann dies über JavaScript erfolgen:
  
-<code syntaxhighlighter-pre>+<code javascript>
 <script> <script>
     // Andere Hintergrundfarbe     // Andere Hintergrundfarbe
Zeile 105: Zeile 77:
     <INPUT ... data-validation-coloring="off" ...>     <INPUT ... data-validation-coloring="off" ...>
 </script> </script>
- 
- 
 </code> </code>
- 
- 
  
 ===== 3) Beispiele für reguläre Ausdrücke ===== ===== 3) Beispiele für reguläre Ausdrücke =====
Zeile 138: Zeile 106:
          
 </code> </code>
- 
- 
  
 ===== 4) Standard-Validierungen (Alias special:) ===== ===== 4) Standard-Validierungen (Alias special:) =====
Zeile 255: Zeile 221:
 'alphanumeric-accented-ws' 'alphanumeric-accented-ws'
    // Für Namen wie André-Jürgen, Bjørn, Müller inkl. . _ - und Leerzeichen    // Für Namen wie André-Jürgen, Bjørn, Müller inkl. . _ - und Leerzeichen
- 
 </code> </code>
  
- +\\ Danke für's Lesen!
- +
-\\ +
- +
- +
-Danke für's Lesen!+
  
    
  
    
- 
- 
- 
- 
- 
- 
-