Formularüberprüfung mit JavaScript

Formularüberprüfungen sind schon eine feine Sache, sie haben leider einen kleinen Haken, im folgenden möchte ich kurz beschreiben, wie eine Formularüberprüfung eingerichtet wird und welche Dinge man dabei beachten sollte.

Zuerst zur Einrichtung:

Zuerst brauchen wir eine JavaScript-Funktion, die die Überprüfung durchführt, ich stelle hier nur ein Beispiel für zwei verschiedene Arten von Feldern, Textfeldern und Checkboxen rein, wobei die Textbox einmal darauf überprüft wird, ob überhaupt Inhalte vorhanden sind, und dann ob ein @ vorhanden ist, das ist dann interessant, wenn eine Email-Adresse eingegeben werden soll, bei der Checkbox überprüfe ich, ob diese angehakt ist:

function chkFormular () {
if (document.Formular.Anrede.value == "";) {
alert("Bitte die Anrede eingeben!");
document.Formular.Anrede.focus();
return false;
}
if (document.Formular.Email1.value.indexOf("@") == -1) {
alert("Keine gültige E-Mail-Adresse!");
document.Formular.Email1.focus();
return false;
}

if (document.confirm.agb.checked == false) {
alert("Bitte AGBs akzeptieren!");
document.Formular.agb.focus();
return false;
}
}

Um nun diese Funktion in einem Formular aufzurufen fügt man folgendes zum <FORM>-Tag hinzu:

<form name="Formular" action="index.php" method="POST" onsubmit="return chkFormular()">

name=”Formular” bezeichnet den Namen des Formulars, den finden wir auch in der Funktion wieder, dort bei “if(document.Formular.Feldname.”, Feldname bezeichnet den Namen des Formularfeldes, das überprüft werden soll

Mit onsubmit starten wir den Aufruf der Funktion, sobald auf den Submit-Button geklickt wird.

Nun gibt es nur noch ein kleines Problem: Wenn der Besucher der Seite JavaScript deaktiviert hat, erfolgt keine Überprüfung und er kann munter leere Formulare schicken.

Aber auch dagegen habe ich eine Lösung, einfach den Submit-Button nur einblenden, wenn JavaScript aktiviert ist:

einmal das Ganze als PHP-Code:

echo "\t\t\n"; 
echo "\t\t\t\n";
echo "\t\t\t<script type="text/javascript">// <![CDATA[";
echo "document.write(\"<input class=\\\"kunden\\\" type=\\\"submit\\\" value=\\\"absenden\\\"/>\");
// ]]></script>\n";
echo "<noscript>
<h2>Bitte JavaScript aktivieren</h2>
</noscript><code lang="php">";
echo "\t\t\n";

und nun noch als ganz normalen HTML-Code:



Damit wird bei aktiviertem JavaScript ein Submit-Button angezeigt, bei deaktiviertem JavaScript nur der Hinweis, man möge bitte JavaScript aktivieren.