Eingabeformulare mit komfortabler Fehlerbehandlung programmieren

Nutzer mögen Eingabeformulare nicht, weil sie oft schwer und unangenehm zu bedienen sind. Sie als Programmierer haben aber die Möglichkeit, Benutzern den Umgang mit Formularen so angenehm wie möglich zu machen. Ein Beispielprogramm zeigt, wie es geht.

Zu Beginn überprüft das Programm, ob das $_POST-Array mehr als 0 Einträge hat. Falls ja, übergibt es das komplette $_POST-Array an die Funktion validateForm(). Die prüft die angegebenen Daten und gibt bei Problemen ein Array mit Fehlermeldungen zurück.

Als Schlüssel des assoziativen Arrays dienen die Feldnamen. Die Funktion validateForm führt nur ein paar grundlegende Prüfungen durch etwa, ob überhaupt etwas eingetragen wurde oder ob, im Falle der Kostenstelle, das Zahlenformat stimmt.

Natürlich können und sollten Sie in validateForm ausgereiftere Prüfmechanismen anwenden, etwa mit Regulären Ausdrücken – das würde hier aber zu weit führen. Zurück zum Hauptprogramm. Das prüft das zurück gegebene Fehler-Array auf seine Größe. Hat es mehr als 0 Einträge, wird das Formular mit showForm() noch einmal angezeigt.

Dabei erhält das Formular ein Array mit den Fehlermeldungen sowie $_POST als Parameter. Die Funktion showForm() gibt zunächst HTML-Code für die Seite aus. Darunter sind zwei CSS-Klassen für die Texteingabefelder: ok und error. Für error ist ein roter Rahmen sowie ein größerer Abstand von den umgebenden Elementen vorgegeben, um das fehlerhafte Element hervorzuheben.

Danach prüft eine Abfrage, ob das Array mit den Fehlermeldungen Einträge hat. Falls ja, erscheint über dem Formular eine allgemeine Fehlermeldung – genaueres steht dann neben den Feldern. Weiter geht es mit Formularfunktionen, die das Formular öffnen, die Texteingabefelder samt Submit-Button anzeigen und das Formular schließen.

Die Hauptarbeit erledigt inputText(). Die Funktion zeigt ein Input-Formularfeld an. Als Parameter verlangt sie ein Label, einen Namen, einen Vorgabewert und schließlich ein Array mit Fehlermeldungen. inputText() prüft dann, ob für den übergebenen Feldnamen eine Fehlermeldung im Array vorliegt. Falls ja, ändert es den vorgegebenen CSS-Klassennamen von ok in error und belegt die Ausgabevariable der Fehlermeldung mit dem Text aus dem Array. Danach gibt die Funktion das fertige Input-Feld an den Aufrufer zurück.

Ist das Formular schließlich richtig ausgefüllt und erfüllt es die weiteren Prüfbedingungen, geht es weiter mit processForm(). Im Beispiel gibt die Funktion nur ein paar Meldungen aus – im echten Leben würde sie die Daten an dieser Stelle speichern oder anderweitig verarbeiten.

Der Server prüft die Formulardaten

Ein Weg, mehr Komfort in die Formulare zu bringen: Nach dem Absenden eines Formulars ruft sich die Seite selbst auf, prüft die Eingaben und zeigt gegebenenfalls das Formular mit den Fehlermeldungen. Die Felder mit falschen Eingaben erscheinen rot umrandet, neben dem Feld steht gegebenenfalls die Fehlermeldung. Das Programm am Ende dieses Beitrags zeigt, wie Sie ein solches Formular mit Prüfprogramm schreiben.

Gegenüber einer Fehlerprüfung mit Javascript hat dieses Verfahren einen großen Vorteil: Es prüft nicht nur einfache Sachverhalte, etwa, ob ein Feld ausgefüllt ist. Vielmehr lassen sich die Daten auch gegen den Datenbestand einer Datenbank oder weitere komplexe Regeln prüfen – vergleichbares wäre unter Javascript mit dem Übertragen größerer Datenmengen verbunden.

Zahlen prüfen mit is_numeric()

Beim Prüfen auf einen Zahlenwert finden Sie in unserem Programm eine kleine Besonderheit: Statt mit is_int() müssen Sie bei aus $_POST ermittelten Parametern mit is_numeric() prüfen, ob es sich um eine Zahl handelt. Der Grund: Nach der Übergabe der Parameter per POST und GET liegen die Daten erst einmal als String vor – da greift die sonst normalerweise verwendete Funktion is_int() nicht. Um sicherzustellen, dass es sich auch um einen echten Integer-Wert ohne Nachkommastellen handelt, vergleicht die Funktion validateForm() danach noch die mit (int) in einen Integer ohne Nachkommastellen umgewandelte Zahl mit dem Original-Wert.

Formulare in Funktionen

In diesem Beispielprogramm stecken alle Formularaufrufe in Funktionen. Der Grund: Wer möchte, kann derart aufbereitete Formulare mit automatischen Prüfroutinen untersuchen. Dazu ruft er eine Formularfunktion mit vorgegebenen Parametern auf und wertet die Antwort beispielsweise mit einem Regulären Ausdruck aus.

Mit einer gewissen Ausstattung an Testroutinen können Sie bei großen Projekten automatische Tests ausführen und so ohne großen Aufwand Fehler aufspüren.

<?php

define(‘BRLF’, “<br/>n”);

$arrErrors = array();

if (count($_POST) > 0) {

$arrErrors = validateForm($_POST);

if (sizeof($arrErrors) > 0)

showForm($arrErrors, $_POST);

else

processForm($_POST);

}

else {

showForm($arrErrors, $_POST);

}

function showForm($arrErrors, $arrPostedData)

{

echo <<<STARTHTML

<html><head>

<title>Formular</title>

<style type=”text/css”>

.ok {margin:2px;}

.error {border:solid 2px red;

margin:4px;}

</style>

</head>

<body><h1>Kostenstelle</h1>

STARTHTML;

if (sizeof($arrErrors) > 0) {

echo ‘Fehler in Eingabe:’.BRLF;

}

echo openForm($_SERVER[‘PHP_SELF’], ‘POST’);

echo inputText(‘Name’, ‘name’, $arrPostedData[‘name’],

$arrErrors).BRLF;

echo inputText(‘Vorname’, ‘vorname’, $arrPostedDa-

ta[‘vorname’], $arrErrors).BRLF;

echo inputText(‘Kostenstelle’, ‘kostenstelle’,

$arrPostedData[‘kostenstelle’], $arrErrors).BRLF;

echo submitForm();

echo closeForm();

echo <<<ENDHTML

</body>

</html>

ENDHTML;

}

function inputText($strLabel, $strName, $strValue,

$arrErrors) {

$strClass = ‘ok’;

$strError = ”;

if (isset($arrErrors[$strName])){

$strClass = ‘error’;

$strError = ‘ (‘.$arrErrors[$strName].’)’;

}

return “{$strLabel}: <input type=’text’

name='{$strName}’ value='{$strValue}’ class=

‘{$strClass}’ />{$strError}”;

}

function openForm($strAction, $strMethod) {

return “<form action='{$strAction}’

method='{$strMethod}’>”;

}

function submitForm($strValue = ‘Absenden’) {

return “<input type=’submit’ value='{$strValue}’>”;

}

function closeForm() {

return ‘</form>’;

}

function validateForm($arrPostData) {

$arrErrors = array();

if (!isset($arrPostData[‘name’]) ||

(strlen($arrPostData[‘name’]) == 0)) {

$arrErrors[‘name’] = ‘Kein Wert eingegeben.’;

}

else {

// weitere Checks

}

if (!isset($arrPostData[‘vorname’]) ||

(strlen($arrPostData[‘vorname’]) == 0)) {

$arrErrors[‘vorname’] = ‘Kein Wert

eingegeben.’;

}

else {

// weitere Checks

}

if (!isset($arrPostData[‘kostenstelle’]) ||

strlen($arrPostData[‘kostenstelle’]) == 0) {

$arrErrors[‘kostenstelle’] = ‘Kein Wert

eingegeben’;

}

else {

if(is_numeric($arrPostData[‘kostenstelle’])

&& ($arrPostData[‘kostenstelle’] > 0)

&& ((int) $arrPostData[‘kostenstelle’]) ==

$arrPostData[‘kostenstelle’]) {

// Weitere Checks…

}

else

$arrErrors[‘kostenstelle’] = ‘Falscher Wert.

Muss ganze Zahl > 0 sein.’;

}

return $arrErrors;

}

function processForm($arrPostedData) {

echo ‘Vielen Dank für die Eingabe:’.BRLF;

echo ‘Name: ‘.$arrPostedData[‘name’].BRLF;

echo ‘Vorname: ‘.$arrPostedData[‘vorname’].BRLF;

echo ‘Kostenstelle: ‘.

$arrPostedData[‘kostenstelle’].BRLF;

// …weiter verarbeiten

}

?>

Schlechte Formulare bringen Verluste

Schlechtes Design und schlechte Programmierung bei Eingabeformularen kann Nutzer von der Seite vertreiben. Und das bedeutet: eine verlorene Anfrage, ein verlorener Kunde, möglicherweise viel verlorenes Geld.

Deshalb gilt als erste Regel:

Verlangen Sie nur so wenig Eingaben wie möglich vom Kunden.

Und die zweite Regel:

Gestalten Sie das Formular und das dahinter liegende Skript so, dass es Fehler erkennt und dass der Kunde diese Fehler einfach korrigieren kann. Das größte Problem sind Fehleingaben seitens der Nutzer. Viele Websites melden dann zwar einen Fehler, präsentieren dann aber dem Kunden erneut das leere Formular. Das ist höchst frustrierend. In vielen Fällen wird sich der Benutzer von so einer Seite abwenden. Besser ist es, das Formular samt aller bisher ausgefüllten Feldinhalte nochmals anzuzeigen und die fehlerhaften Eingaben hervorzuheben.

Der Benutzer erkennt dann die Fehleingabe und kann sie ohne großen Aufwand korrigieren, bevor er das Formular noch einmal an den Server sendet.

Ähnliche Beiträge