Clientseitige Validierungen mit Ausnahmeobjekten
Rüdiger
function clientCheck() {
...
}
im JavaScript definiert ist, wird sie bei genericSubmit ausgeführt,
also z.B. immer bei Klick auf Buttons. Wenn die Methode nicht den Wert
true zurückgibt, wird das Formular nicht versendet. Sinn dieser
Funktion ist es, wie ihr Name sagt, mittels einfacher, im Browser
ausführbarer Prüfungen zu verhindern, dass ein Request mit
fehlerhaften oder ungültigen Daten überhaupt das SAP-System
erreicht.
Man kann die clientChecks in lesbarer Form notieren, wenn man sich die
Ausnahmeobjekte in JavaScript zunutze macht. Dann stehen die Prüfungen
der Reihe nach in einem try ... catch ... Block, und die
Ausnahmebehandlung besteht beispielsweise darin, eine Fehlermeldung
zur Anzeige zu bringen und Felder mit Fehleingaben zu markieren.
Hier der Rumpf einer solchen Prüffunktion:
function clientCheck() {
try {
check_betrieb();
...
return true;
}
catch(e) {
show_error( e );
return false;
}
Die für die Fehleranzeige nötigen Informationen - den Text der
Fehlermeldung und die ID's oder HTML-Elementobjekte der betroffenen
Felder - kann das Ausnahmeobjekt selbst transportieren:
Ausnahmeobjekte können in JavaScript einen beliebigen Typ haben. Für
unseren Zweck passt es gut, im Fehlerfall mit
throw [ <Fehlermeldung>, <Fehlerfeld1>, <Fehlerfeld2>, ... ]
einen Array zu senden.
Die Prüfung check_betrieb() kann z.B. folgendermassen aussehen:
function check_betrieb() {
if (!$('betrieb').match(/\d{4}/)) {
// Bitte in Position &1 zuerst ein Betrieb eingeben
throw [ msgText.V1186.replace( /&1/, $('position').value ),
"betrieb0001" ];
}
}
Eine ungültige Eingabe - hier z.B. etwas anderes als vier Ziffern für
den Betrieb - löst ein Ausnahmeobjekt aus.
Dieses wird mit catch(e) abgefangen und mit show_error(e) ausgegeben.
Das Ausgabeobjekt kann ein String sein, dann wird dieser von
show_error() einfach in die Message-Zeile gestellt. Es kann auch, wie
hier, ein Array sein, wobei das zweite Arrayelement eine oder mehrere
(dann durch Leerraum getrennte) ID's von Inputfeldern enthalten kann.
Diese werden dann durch show_error() als fehlerhaft markiert.
Hier die in unserem aktuellen Projekt verwendete Funktion
show_error(), die darüberhinaus auch noch viele verschiedene
Aufrufkonventionen bedient.
// Eine Fehlermeldung anzeigen
// und, falls mehr als ein Parameter übergeben wird,
// Fehlerfeld(er) mit den angegebenen ID's markieren
function show_error( iMessage, iFields) {
// Überladene Definition: show_error( [iMessage, iFields] )
// wird transformiert in show_error( iMessage, iFields )
if ((arguments.length == 1) && Object.isArray(iMessage)) {
return show_error( iMessage[0], iMessage[1] );
}
// Überladene Definition: show_error( "m", "f1", "f2", ... )
// wird transformiert in show_error( "m", ["f1", "f2"] )
if (arguments.length > 2) {
return show_error( iMessage,
$A(arguments).slice(1).flatten()
);
}
// Fehlermeldung anzeigen
setMessage("msg", iMessage);
// Fehlerfelder markieren
if (iFields) {
set_error_fields( iFields );
}
}
Auch das Markieren der Felder mit ungültigen Eingaben erfolgt mit
einer dynamischen Schnittstelle. Es kann ein Array von ID's übergeben
werden, oder ein String mit ID's, die durch Leerraum getrennt sind,
oder eine Liste von ID's, oder eine Liste von HTML-Elementobjekten:
function set_error_fields( iFields ) {
// Erste Überladung - im Feld wird nicht eine ID,
// sondern ein Array von ID's übergeben
if ((arguments.length == 1) && Object.isArray( iFields ) ) {
iFields.each( set_error_fields );
return;
}
// Zweite Überladung
// - die ID's werden einzeln als Argumente übergeben
if (arguments.length > 1) {
set_error_fields( $A(arguments) );
return;
}
// Ab hier sind die enthält iFields
// ID's von Feldern als Space-separarierter String
// oder ein DOM-Objekt
if (Object.isString(iFields)) {
// String mit ID's
$w(iFields).each( setErrorField );
}
else {
// DOM-Objekt
setErrorField( iFields );
}
}
Die Funktion setErrorField ist dabei seit jeher die übliche Funktion
unseres MVC-Frameworks zum Markieren eines einzelnen Eingabefeldes
(enthalten in der Bibliothek /sap/bc/bsp/sap/public/mvc/global.js).