Die Präsentation von Steven Grzbielok auf der Apex Connect 2017 beschreibt die Vorteile und Techniken der clientseitigen Validierung in Webanwendungen, um die Serverlast zu reduzieren und die Benutzererfahrung zu verbessern. Dabei werden HTML5-Constraints und verschiedene Plugins vorgestellt, die eine nahtlose Integration und Anwendung dieser Validierungen ermöglichen. Der Vortrag schließt mit einer Betonung der Notwendigkeit, clientseitige und serverseitige Validierungen sinnvoll zu kombinieren.

1. Let Your Clients do the
Work
Steven Grzbielok:
11.05.2017 | APEX connect
2017

2. Facts & Figures
Mittelständischer IT-Dienstleister
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen
240
Beschäftigte
Gründung
1994
Niederlassung
Frankfurt am Main
Ausbildungs-
betrieb
Inhabergeführt
Zertifizierter
Partner von
Oracle,
Microsoft
und SAP
28 Mio. Euro
Umsatz
2
Managing
Technology

3.  Steven Grzbielok
 Seit 08.2014 Berater bei der MT AG in Ratingen
 B.Sc. in Wirtschaftsinformatik, M.Sc. in Arbeit
 Beschäftigt sich seit 2014 mit Oracle Application Express
und Oracle Datenbanken
 APEX Showcase https://apex.mt-ag.com/
 Twitter https://twitter.com/sgrzbielok
3
Über mich

4. Agenda
1. Clientseitige Validierungen
2. HTML5
3. APEX out of the box
4. Plugins & Frameworks
4

5. Der Standard: Serverseitige Validierungen
5
Email = info_at_mail.com
No valid email!
Korrektur
Submit
Erro
r

6. Problematik
Belastung des Servers bei jeder fehlerhaften Eingabe
Nutzer erkennt nur Fehler beim Submit
Nutzer muss ggf. Eingaben wiederholen
6

7. Lösung: Client-seitige Validierungen
Validierungen auf dem Clientsystem
Entlastung des Servers
Client-State erhalten
Zeitnah nach der Eingabe, ohne Submit
Kürzere Korrekturschleifen durch den Nutzer
7

8. HTML5 Constraints
Attribute:
Disabled
Min/Max
Pattern
Required
Type
Design via CSS möglich
Validierung beim Verlassen d. Items, Meldung vor dem Submit
Fehlermeldung anpassbar
data-valid-message=”Employee Name is required”
8

9. HTML5 Constraints
9

10. HTML5 Constraints
10
Validierungsergebnisse gestalten: Pseudo-Klassen
Selector Description
:disabled Selects input elements with the "disabled" attribute
specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute
specified
:required Selects input elements with the "required" attribute
specified
:valid Selects input elements with valid values

11. HTML5 Constraints
 Teilweise unterstützt ab IE9
11
Browser Support

12. 12
Demo Time!

13.  Neue APIs
apex.page.validate
apex.item  getValidity und getValidationMessage
13
Neu in APEX 5.1
http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side-validation/

14.  Mögliche Implementierung der Validierung als Dynamic Action
14
JavaScript APIs
Neu in APEX 5.1
http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side-validation/

15. APEX out of the box
 Required
 Zeichenbegrenzungen
 Subtype
 Email
 Phone Number
 URL
15

16. APEX out of the box
Neuladen der Seite verhindern
Warnung bei ungespeicherten Änderungen
16

17. HTML5 Validierungen einfach einfügen
17
Keine Lust auf reguläre Ausdrücke?  http://regexr.com/

18. 18
Demo Time!

19. Clientseitige Validierungen mit Plugins
19
Live Validations von Nick Buytaert

20. 20
PRETIUS Client Side Validation Plugin
Clientseitige Validierungen mit Plugins
Demo Time!

21. Clientseitige Validierungen mit Plugins
21
 Pretius Client Side Validation Plugin
 Schnelles Setup  nur eine Dynamic Action (auf Seite 0) nötig
 Ausführen von beliebigen Validierungen möglich
 Jedoch serverseitig: JavaScript ruft Validierung in der Datenbank auf
 Kein Submit nötig
 Validierung findet jedoch auf der Server-Seite statt
 Live Validation Plugin
 Echte clientseitige Validierungen
 Jedoch „nur“ auf Basis der HTML5 Validierungen

22. JavaScript Frameworks
22
Unter anderem
 Parsley.js
 validate.js
 Verify.js
 gvalidator
 formance.js
 accounting.js
 example-user.js
 jquery.payment
 …

23. Parsley
23

24. Parsley
 Kann Submit unterdrücken
 Einfache Validierungen über HTML-Attribute möglich
 Komplexe Validierungen mit JavaScript  Kombination mit Serverseitigen Validierungen
durch Abfrage von Seitenprozessen im JavaScript möglich
24

25. Json Form Validator
25
https://github.com/amitava82/json-form-validator

26. Json Form Validator
 Guter Überblick über alle Validierungen
 Features noch stark eingeschränkt
 Lediglich HTML5 Features
26

27. Ausblick: JavaScript Validierungen in APEX
 Item Plugin oder Dynamic Action Plugin
 Zuordnung durch CSS-Klassen
 Auf Global Page – 0 einbinden
27

28. Exkurs: Was kann der Client noch für Sie tun?
 Automatische Datumsformatierung mit JavaScript
28

29. 29
Clientseitige Validierungen sind kein Ersatz für
serverseitige Validierungen!

30. 30

31. Fazit
 Einfache Validierung: HTML5 oder APEX-Boardmittel
 Komplexere Validierungen: JavaScript und DB im Zusammenspiel
 Für bessere UX: Pretius Plugin
 Client nicht zu stark belasten, Server aber auch nicht
31

32. Vielen Dank! Noch Fragen?
Vortragsbewertung: http://bit.ly/2oUfQR1
@sgrzbielok
xing.com/profile/Steven_Grzbielok