Passwortfelder in HTML sind erstmal nur Eingabefelder, welche die Eingabe nicht anzeigen. Wie können wir bei einem HTML-Formular eine Passwortbestätigung realisieren.
Nehmen wir folgendes Formular, welches wir mit dem DA-FormMaker erstellt haben.
Das Passwort soll ein Pflichtfeld sein und beim Absenden wollen wir überprüfen, ob zweimal das gleiche Passwort eingegeben worden ist.
Die Felder haben wir wie folgt angelegt:
Wichtig wird gleich der Feldname der beiden Felder. Außerdem sind beide Pflichtfelder, sodass der Anwender hier etwas eingeben muss.
Jetzt müssen wir noch die Überprüfung mit Java-Script realisieren, welche sicherstellt, dass in beiden Feldern die gleiche Angabe gemacht worden ist. Diese sieht so aus.
<script type="text/javascript">
$("[name='DAFORM']").on('submit', checkPasswords);
function checkPasswords()
{
var pw1 = document.getElementById("Passwort").value;
var pw2 = document.getElementById("Passwort_bestaetigen").value;
if (pw1 != pw2)
{
alert("Passwörter müssen gleich sein!")
document.getElementById("Passwort").focus();
return false;
}
return true;
}
</script>
Was passiert hier?
Zuerst lesen wir die Inhalte unserer beiden Passwortfelder aus. Hier kommen auch die Namen der beiden Felder ins Spiel. Anschließend überprüfen wir, ob die Eingabe übereinstimmt. Falls nicht geben wir mit “alert” eine Fehlermeldung aus. Gleichzeitig verhindern wir an der Stelle mit “return false;” das Abschicken des Formulars.
Den Code müssen wir nun noch im Formular unterbringen. Dies können wir im DA-FormMaker und DA-BestellFormular unter Einstellungen – Erweiterte Einstellungen vornehmen.
Hier fügen wir den Code als Zusätzliche Codefußzeile ein.
Fertig! Beim Abschicken wird nun geprüft, ob die Passwörter übereinstimmen.
