654 lines
25 KiB
JavaScript
654 lines
25 KiB
JavaScript
|
// TODO: Aufräumen
|
|||
|
|
|||
|
// Großbuchstaben -> [A-Z]
|
|||
|
// Kleinbuchstaben -> [a-z]
|
|||
|
// Bindestrich -> [-]
|
|||
|
// Unterstrich -> [_]
|
|||
|
// Leerzeichen -> [ ]
|
|||
|
// Großbuchstaben (Umlaute) -> [ÄÖÜ]
|
|||
|
// Kleinbuchstaben (Umlaute) -> [äöü]
|
|||
|
// Sonderzeichen -> [°^!"§$%&/{}()[]=?\´`@€+*~#'<>|,;.:-_]
|
|||
|
|
|||
|
//------------------------------------------------------------------------------
|
|||
|
|
|||
|
// EventListener für die Eingabefelder hinzufügen.
|
|||
|
document.getElementById("vorName").addEventListener("blur", checkFirstName);
|
|||
|
document.getElementById("nachName").addEventListener("blur", checkLastName);
|
|||
|
document.getElementById("strasse").addEventListener("blur", checkStreetName);
|
|||
|
document.getElementById("hausNummer")
|
|||
|
.addEventListener("blur", checkHouseNumber);
|
|||
|
document.getElementById("postleitzahl").addEventListener("blur", checkPLZ);
|
|||
|
document.getElementById("ort").addEventListener("blur", checkCity);
|
|||
|
document.getElementById("email").addEventListener("blur", checkEmailAddress);
|
|||
|
document.getElementById("emailRep")
|
|||
|
.addEventListener("blur", checkRepeat_EmailAddress);
|
|||
|
document.getElementById("passwort").addEventListener("blur", checkPassword);
|
|||
|
document.getElementById("passwortRep")
|
|||
|
.addEventListener("blur", checkRepeat_Password);
|
|||
|
|
|||
|
// EventListener für den Button "Registrieren" hinzufügen.
|
|||
|
document.getElementById("registrierenKnopf")
|
|||
|
.addEventListener("click", checkForPossibleSubmit);
|
|||
|
|
|||
|
// EventListener für das Formular hinzufügen.
|
|||
|
document.getElementById("registrierungForm")
|
|||
|
.addEventListener("submit", checkForPossibleSubmit);
|
|||
|
|
|||
|
//------------------------------------------------------------------------------
|
|||
|
|
|||
|
/**
|
|||
|
* Überprüft, ob ein Eingabefeld ausgefüllt wurde.
|
|||
|
*
|
|||
|
* @param element Eingabefeld, welches überprüft werden soll.
|
|||
|
* @returns false -> Feld wurde nicht ausgefüllt; true -> Feld wurde ausgefüllt.
|
|||
|
*/
|
|||
|
function checkIfElementHasValue(element) {
|
|||
|
regex_onlyWhitespaces = /^\s*$/;
|
|||
|
if (element.value == "" || element.value == null
|
|||
|
|| regex_onlyWhitespaces.test(element.value)) {
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Zeigt eine Fehlermeldung unter dem übergebenen Eingabefeld ein.
|
|||
|
*
|
|||
|
* @param inputField Eingabefeld, unter dem die Meldung erscheinen soll.
|
|||
|
* @param pNumber Nummer des Paragraphen Elements, welches geändert werden soll.
|
|||
|
* @param message Fehlermeldung, die angezeigt werden soll.
|
|||
|
*/
|
|||
|
function showErrorMessage(inputField, pNumber, message) {
|
|||
|
inputField.style.border = "2px solid #F22C2C"
|
|||
|
var classOfInputField = inputField.parentElement;
|
|||
|
var errorMessage = classOfInputField.getElementsByTagName('p')[pNumber];
|
|||
|
errorMessage.innerHTML = message;
|
|||
|
errorMessage.style.display = "block";
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Entfernt eine Fehlermeldung, falls vorhanden.
|
|||
|
*
|
|||
|
* @param inputField Eingabefeld, dessen Meldung entfernt werden soll.
|
|||
|
* @param pNumber Nummer des Paragraphen Elements, welches geändert werden soll.
|
|||
|
*/
|
|||
|
function removeErrorMessage(inputField, pNumber) {
|
|||
|
inputField.style.border = "2px solid #70AD47"
|
|||
|
var classOfInputField = inputField.parentElement;
|
|||
|
var errorMessage = classOfInputField.getElementsByTagName('p')[pNumber];
|
|||
|
errorMessage.style.display = "none";
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Jeder Vorname beginnt mit einem Großbuchstaben,
|
|||
|
* gefolgt von mindestens einem Kleinbuchstaben.
|
|||
|
* Mehrere Vornamen können mit einem Leerzeichen
|
|||
|
* oder Bindestrich getrennt werden.
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// Anna -> Keine Fehlermeldung
|
|||
|
// Björn -> Keine Fehlermeldung
|
|||
|
// Anna-Maria -> Keine Fehlermeldung
|
|||
|
// Anna Maria -> Keine Fehlermeldung
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// Sarah. -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// Karín -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// 1234 -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// L -> Fehlermeldung Anzahl Zeichen
|
|||
|
// Anna maria -> Fehlermeldung Groß- und Kleinschreibung
|
|||
|
// Anna MAria -> Fehlermeldung Groß- und Kleinschreibung
|
|||
|
// Annnna -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
|||
|
// Anna--Maria -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
// Anna Maria -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
// Anna M -> Fehlermeldung Anzahl Zeichen pro Teil
|
|||
|
// Anna- -> Fehlermeldung Letztes Zeichen
|
|||
|
// Anna -> Fehlermeldung Letztes Zeichen
|
|||
|
function checkFirstName() {
|
|||
|
var firstName = document.getElementById("vorName");
|
|||
|
// Fehlermeldung Leeres Feld
|
|||
|
if (!(checkIfElementHasValue(firstName))) {
|
|||
|
showErrorMessage(firstName, 0, "Bitte füllen Sie das Feld aus.")
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Erlaubte Zeichen
|
|||
|
else if (!(/^[A-Za-zÄÖÜäöüß -]*$/.test(firstName.value))) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Ein Vorname darf nur Groß- und Kleinbuchstaben von A-Z, "
|
|||
|
+ "sowie Umlaute, Eszett, Bindestriche und Leerzeichen enthalten.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen
|
|||
|
else if (!(/.{2,}/.test(firstName.value))) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Ein Vorname muss aus mindestens zwei Buchstaben bestehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
else if (/(?:([- ])\1{1,}|( -)|(- ))/.test(firstName.value)) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen pro Teil
|
|||
|
else if (!(/^([A-ZÄÖÜa-zäöüß]{2,}[ -]?)+$/.test(firstName.value))) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Jeder Teil eines Vornamens muss aus "
|
|||
|
+ "mindestens zwei Buchstaben bestehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Letztes Zeichen
|
|||
|
else if (!(/[a-zäöüß]$/.test(firstName.value))) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Der Vorname muss mit einem Kleinbuchstaben enden.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Groß- und Kleinschreibung
|
|||
|
else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([- ][A-ZÄÖÜ][a-zäöüß]+)*$/
|
|||
|
.test(firstName.value))) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Jeder Teil eines Vornamens "
|
|||
|
+ "muss mit einem Großbuchstaben beginnen. "
|
|||
|
+ "Nach einem Großbuchstaben folgen nur Kleinbuchstaben.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
|||
|
else if (/(\w)\1{2,}/.test(firstName.value)) {
|
|||
|
showErrorMessage(firstName, 0,
|
|||
|
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
|
|||
|
+ "nebeneinander stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(firstName, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Ein Nachname kann mit einem Klein- oder Großbuchstaben beginnen,
|
|||
|
* gefolgt von mindestens einem Kleinbuchstaben.
|
|||
|
* Mehrere Nachnamen können mit einem Leerzeichen
|
|||
|
* oder Bindestrich getrennt werden.
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// Schulze -> Keine Fehlermeldung
|
|||
|
// Jäger -> Keine Fehlermeldung
|
|||
|
// Ziegler-Hermann -> Keine Fehlermeldung
|
|||
|
// von der Leyen -> Keine Fehlermeldung
|
|||
|
// von Bern -> Keine Fehlermeldung
|
|||
|
// zu Liechtenstein -> Keine Fehlermeldung
|
|||
|
// Bÿl -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// Jäger. -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// 1234 -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// B -> Fehlermeldung Anzahl Zeichen
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// bauer -> Fehlermeldung Erlaubtes Namenspräfix
|
|||
|
// vom Bauer -> Fehlermeldung Erlaubtes Namenspräfix
|
|||
|
// BauEr -> Fehlermeldung Groß- und Kleinschreibung
|
|||
|
// Bauuuer -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
|||
|
// Ziegler Hermann -> Fehler Doppelnamen
|
|||
|
// Ziegler--Hermann -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
// Bauer- -> Fehlermeldung Letztes Zeichen
|
|||
|
function checkLastName() {
|
|||
|
var lastName = document.getElementById("nachName");
|
|||
|
// Fehlermeldung Leeres Feld
|
|||
|
if (!(checkIfElementHasValue(lastName))) {
|
|||
|
showErrorMessage(lastName, 0, "Bitte füllen Sie das Feld aus.")
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Erlaubte Zeichen
|
|||
|
else if (!(/^[A-Za-zÄÖÜäöüß -]*$/.test(lastName.value))) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Ein Nachname darf nur Groß- und Kleinbuchstaben von A-Z, "
|
|||
|
+ "sowie Umlaute, Eszett, Bindestriche und Leerzeichen enthalten.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen
|
|||
|
else if (!(/.{2,}/.test(lastName.value))) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Ein Nachname muss aus mindestens zwei Buchstaben bestehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
else if (/([-])\1{1,}/.test(lastName.value)) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen pro Teil
|
|||
|
else if (!(/^([A-ZÄÖÜa-zäöüß]{2,}[ -]?)+$/.test(lastName.value))) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Jeder Teil eines Nachnamens muss aus "
|
|||
|
+ "mindestens zwei Buchstaben bestehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Letztes Zeichen
|
|||
|
else if (!(/[a-zäöüß]$/.test(lastName.value))) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Der Nachname muss mit einem Kleinbuchstaben enden.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehler Doppelnamen
|
|||
|
else if (/[A-ZÄÖÜ][a-zäöüß]+[ ]+[A-ZÄÖÜ][a-zäöüß]+/.test(lastName.value)) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Doppelnamen müssen mit einem Bindestrich getrennt werden.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Erlaubtes Namenspräfix
|
|||
|
else if (!(/^(von( der)?|zu)[ ][A-ZÄÖÜ]|^[A-ZÄÖÜ]/.test(lastName.value))) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Ein Nachname muss muss mit einem Großbuchstaben beginnen, "
|
|||
|
+ "es sei denn, Sie benutzen ein Namenspräfix.<br>"
|
|||
|
+ "Gültige Namenspräfixe sind 'von', 'zu' und 'von der'.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Groß- und Kleinschreibung
|
|||
|
else if (!(/(^(von( der)?|zu)[ ][A-ZÄÖÜ][a-zäöüß]+|^[A-ZÄÖÜ][a-zäöüß]+)([-][A-ZÄÖÜ][a-zäöüß]+)?$/.test(lastName.value))) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Jeder Teil eines Nachnamens, bis auf den möglichen Namenszusatz am Anfang, "
|
|||
|
+ "muss mit einem Großbuchstaben beginnen. "
|
|||
|
+ "Nach einem Großbuchstaben folgen nur Kleinbuchstaben.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
|||
|
else if (/(\w)\1{2,}/.test(lastName.value)) {
|
|||
|
showErrorMessage(lastName, 0,
|
|||
|
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
|
|||
|
+ "nebeneinander stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(lastName, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Ein Straßenname kann aus Buchstaben (inlusive Umlaute), Ziffern
|
|||
|
* oder einer Mischung aus beidem bestehen.
|
|||
|
* Auch Apostrophen und das scharfe S können im Namen vorkommen,
|
|||
|
* stehen aber nie am Anfang.
|
|||
|
* Ein Straßenname kann aus mehreren Teilen bestehen,
|
|||
|
* welche mit einem Leerzeichen oder Bindestrich getrennt werden.
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// Straße 73 -> Keine Fehlermeldung
|
|||
|
// Kurt-Romstöck-Ring -> Keine Fehlermeldung
|
|||
|
// Laehr'scher Jagdweg -> Keine Fehlermeldung
|
|||
|
// A 3 -> Keine Fehlermeldung -> Keine Fehlermeldung
|
|||
|
// A3 -> Keine Fehlermeldung
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// Frießenstr. -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// D -> Fehlermeldung Anzahl Zeichen
|
|||
|
// 1234 -> Fehlermeldung Ziffern
|
|||
|
// Fri3senstraße -> Fehlermeldung Ziffern
|
|||
|
// kurt-Romstöck-Ring -> Fehlermeldung Groß- und Kleinschreibung
|
|||
|
// Rue de Saint-Germain-lès-Corbeil -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// Musterstraße' -> Fehlermeldung Letztes Zeichen
|
|||
|
function checkStreetName() {
|
|||
|
var streetName = document.getElementById("strasse");
|
|||
|
// Fehlermeldung Leeres Feld
|
|||
|
if (!(checkIfElementHasValue(streetName))) {
|
|||
|
showErrorMessage(streetName, 0,
|
|||
|
"Bitte füllen Sie das Feld Straße aus.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen
|
|||
|
else if (!(/.{2,}/.test(streetName.value))) {
|
|||
|
showErrorMessage(streetName, 0,
|
|||
|
"Ein Straßenname muss aus mindestens zwei Zeichen bestehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Ziffern
|
|||
|
else if (!(/^[^0-9]*$|[0-9]$/.test(streetName.value))) {
|
|||
|
showErrorMessage(streetName, 0,
|
|||
|
"Ziffern und Zahlen dürfen nur am Ende des Straßennamens stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Erlaubte Zeichen
|
|||
|
else if (!(/^[A-Za-z0-9ÄÖÜäöüß' -]+$/.test(streetName.value))) {
|
|||
|
showErrorMessage(streetName, 0,
|
|||
|
"Ein Straßenname darf nur aus Groß- und Kleinbuchstaben, "
|
|||
|
+ "Umlauten, Eszett, Ziffern, Bindestrichen "
|
|||
|
+ "und Apostrophen bestehen.<br>Bitte stellen Sie sicher, "
|
|||
|
+ "dass alle Abkürzungen ausgeschrieben sind.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Groß- und Kleinschreibung
|
|||
|
else if (!(/^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']+([ -]?[A-ZÄÖÜ0-9][A-Za-z0-9ÄÖÜäöüß']+)*$/)
|
|||
|
.test(streetName.value)) {
|
|||
|
showErrorMessage(streetName, 0,
|
|||
|
"Jeder Teil des Straßennamens muss "
|
|||
|
+ "mit einem Großbuchstaben beginnen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Letztes Zeichen
|
|||
|
else if (!(/[0-9]$|[a-zäöüß]$/.test(streetName.value))) {
|
|||
|
showErrorMessage(streetName, 0,
|
|||
|
"Ein Straßenname kann nur mit einer Ziffer "
|
|||
|
+ "oder einem Kleinbuchstaben enden.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(streetName, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Eine Hausnummer kann aus Ziffern und maximal einem Kleinbuchstaben bestehen.
|
|||
|
* Jede Hausnummer beginnt mit mindestens einer Ziffer.
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// 54 -> Keine Fehlermeldung
|
|||
|
// 2a -> Keine Fehlermeldung
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// a3 -> Fehlermeldung Erstes Zeichen
|
|||
|
// 2A -> Fehlermeldung Syntax
|
|||
|
// 2ab -> Fehlermeldung Syntax
|
|||
|
// 12345 -> Fehlermeldung Syntax
|
|||
|
// 0 -> Fehlermeldung Führende Null
|
|||
|
function checkHouseNumber() {
|
|||
|
var houseNumber = document.getElementById("hausNummer");
|
|||
|
// Fehlermeldung Leeres Feld
|
|||
|
if (!(checkIfElementHasValue(houseNumber))) {
|
|||
|
showErrorMessage(houseNumber, 1,
|
|||
|
"Bitte füllen Sie das Feld Hausnummer aus.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Erstes Zeichen
|
|||
|
else if (!(/^[0-9]/.test(houseNumber.value))) {
|
|||
|
showErrorMessage(houseNumber, 1,
|
|||
|
"Eine Hausnummer muss mit einer Ziffer beginnen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Führende Null
|
|||
|
else if (/^0/.test(houseNumber.value)) {
|
|||
|
showErrorMessage(houseNumber, 1,
|
|||
|
"Eine Hausnummer kann nicht mit einer Null beginnen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Syntax
|
|||
|
else if (!(/^[1-9][0-9]{0,3}[a-z]?$/.test(houseNumber.value))) {
|
|||
|
showErrorMessage(houseNumber, 1,
|
|||
|
"Bitte geben Sie eine gültige Hausnummer ein, "
|
|||
|
+ "welche aus maximal fünf Ziffern und maximal "
|
|||
|
+ "einem Kleinbuchstaben am Ende der Hausnummer besteht.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(houseNumber, 1);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern.
|
|||
|
* Die kleinste mögliche Postzahl ist 01001.
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// 67547 -> Keine Fehlermeldung
|
|||
|
// 08123 -> Keine Fehlermeldung
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// 00000 -> Fehlermeldung Syntax
|
|||
|
function checkPLZ() {
|
|||
|
var plz = document.getElementById("postleitzahl");
|
|||
|
// Fehlermeldung Leeres Feld
|
|||
|
if (!(checkIfElementHasValue(plz))) {
|
|||
|
showErrorMessage(plz, 0,
|
|||
|
"Bitte füllen Sie das Feld Postleitzahl aus.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Syntax
|
|||
|
else if (!(/^(0100[1-9]|010[1-9][0-9]|01[1-9][0-9]{2}|0[2-9][0-9]{3}|[1-9][0-9]{4})$/
|
|||
|
.test(plz.value))) {
|
|||
|
showErrorMessage(plz, 0,
|
|||
|
"Bitte geben Sie eine gültige Postleitzahl ein, "
|
|||
|
+ "welche aus fünf Ziffern besteht. "
|
|||
|
+ "Die kleinste gültige Postleitzahl ist 01001.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(plz, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Ein Stadtname besteht aus Buchstaben (inklusive Umlaute und Eszett),
|
|||
|
* kann mehrere Teile haben und beginnt immer mit einem Großbuchstaben.
|
|||
|
* Die einzelnen Teile können durch ein Leerzeichen, einen Bindestrich,
|
|||
|
* oder einen Schrägstrich getrennt werden.
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// Füssen -> Keine Fehlermeldung
|
|||
|
// Frankenberg/Sachsen -> Keine Fehlermeldung
|
|||
|
// Eschenbach in der Oberpfalz -> Keine Fehlermeldung
|
|||
|
// Auma-Weidatal -> Keine Fehlermeldung
|
|||
|
// Gießen -> Keine Fehlermeldung
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// -> Fehlermeldung Leeres Feld
|
|||
|
// St. Ingbert -> Fehlermeldung Erlaubte Zeichen
|
|||
|
// Auma--Weidatal -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
// Frankenberg/ Sachsen -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
// Füsssen -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
|||
|
// S -> Fehlermeldung Anzahl Zeichen
|
|||
|
// Auma-weidatal -> Fehlermeldung Groß- und Kleinschreibung
|
|||
|
// füssen -> Fehlermeldung Großschreibung Anfang
|
|||
|
// FüSsen -> Fehlermeldung Groß- und Kleinschreibung
|
|||
|
// Auma- -> Fehlermeldung Letztes Zeichen
|
|||
|
function checkCity() {
|
|||
|
var city = document.getElementById("ort");
|
|||
|
// Fehlermeldung Leeres Feld
|
|||
|
if (!(checkIfElementHasValue(city))) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Bitte füllen Sie das Feld Ort aus.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen
|
|||
|
else if (!(/.{2,}/.test(city.value))) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Ein Ortsname muss aus mindestens zwei Zeichen bestehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
|
|||
|
else if (/[ \/-][ \/-]/.test(city.value)) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Erlaubte Zeichen
|
|||
|
else if (!(/^[A-ZÄÖÜa-zäöüß \/-]+$/.test(city.value))) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Ein Ortsname kann nur aus Groß- und Kleinbuchstaben, "
|
|||
|
+ "inklusive Umlauten und Eszett bestehen. "
|
|||
|
+ "Mehrteilige Ortsnamen können mit einem Leerzeichen, Bindestrich "
|
|||
|
+ "oder Schrägstrich getrennt werden. Bitte stellen Sie außerdem "
|
|||
|
+" sicher, dass alle Abkürzungen ausgeschrieben sind.")
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
|
|||
|
else if (/(\w)\1{2,}/.test(city.value)) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
|
|||
|
+ "nebeneinander stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Großschreibung Anfang
|
|||
|
else if (!(/^[A-ZÄÖÜ]/.test(city.value))) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Ein Ortsname muss mit einem Großbuchstaben beginnen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Letztes Zeichen
|
|||
|
else if (!(/[a-zäöüß]$/.test(city.value))) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Ein Ortsname kann nur mit einem Kleinbuchstaben enden.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Groß- und Kleinschreibung
|
|||
|
else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([ -\/][A-ZÄÖÜa-zäöü][a-zäöüß]+)*$/)
|
|||
|
.test(city.value)) {
|
|||
|
showErrorMessage(city, 1,
|
|||
|
"Großbuchstaben können nur am Anfang des Ortsnamens oder, "
|
|||
|
+ "bei mehrteiligen Ortsnamen, am Anfang eines Teilnamens stehen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(city, 1);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Eine E-Mail-Addresse besteht aus einem Lokal- und einem Domänenteil,
|
|||
|
* welche durch ein @ Zeichen getrennt werden.
|
|||
|
* Der lokale Teil darf Buchstaben (Basis-Lateinisch), Ziffern
|
|||
|
* und verschiedene Sonderzeichen enthalten.
|
|||
|
*
|
|||
|
* Der ganze Lokalteil oder Teilabschnitte
|
|||
|
* können mit Anführungszeichen umschlossen werden.
|
|||
|
* Innerhalb der Anführungszeichen dürfen zusätzliche Sonderzeichen
|
|||
|
* und Leerzeichen genutzt werden.
|
|||
|
* Auch erneute Anführungszeichen und Backslashes sind erlaubt,
|
|||
|
* müssen aber nach einem zusätzlichen Backslash stehen.
|
|||
|
* Am Anfang und Ende des lokalen Teils dürfen Kommentare in runden Klammern stehen.
|
|||
|
* Der Lokalteil darf nicht mit einem Punkt beginnen oder enden.
|
|||
|
*
|
|||
|
* Der Domänenteil besteht meist selbst aus drei Teilen:
|
|||
|
* einem Hostnamen, einem Punkt und einer Top-Level-Domain.
|
|||
|
* Die Top-Level-Domain besteht aus mindestens zwei Zeichen.
|
|||
|
*
|
|||
|
*/
|
|||
|
// Beispiele zum Testen:
|
|||
|
// MaxMustermann@email.de -> Keine Fehlermeldung
|
|||
|
// Max!#.Mustermann@email9.com -> Keine Fehlermeldung
|
|||
|
function checkEmailAddress() {
|
|||
|
const regex_emailAddress = /[A-Za-z0-9_!#$%&'*+-\/=?^_`.{|}~]+[@][A-Za-z0-9-]+[.][A-Za-z]{2,}/;
|
|||
|
var emailAddress = document.getElementById("email");
|
|||
|
if (!(checkIfElementHasValue(emailAddress))) {
|
|||
|
showErrorMessage(emailAddress, 0, "Bitte füllen Sie das Feld aus.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else if (!(regex_emailAddress.test(emailAddress.value))) {
|
|||
|
showErrorMessage(emailAddress, 0, "Bitte geben Sie eine gültige E-Mail-Addresse ein, welche die Form 'lokalerTeil@domainteil.topLevelDomain' hat. Erlaubte Zeichen sind Groß- und Kleinbuchstaben, Ziffern und Sonderzeichen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(emailAddress);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Prüft die Übereinstimmung mit der bereits eingegebenen E-Mail-Addresse.
|
|||
|
*/
|
|||
|
function checkRepeat_EmailAddress() {
|
|||
|
var emailAddress = document.getElementById("email");
|
|||
|
var repeatEmailAddress = document.getElementById("emailRep");
|
|||
|
if (!(checkIfElementHasValue(repeatEmailAddress))) {
|
|||
|
showErrorMessage(repeatEmailAddress, 0,
|
|||
|
"Bitte füllen Sie das Feld aus.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else if (emailAddress.value != repeatEmailAddress.value) {
|
|||
|
showErrorMessage(repeatEmailAddress, 0,
|
|||
|
"Bitte stellen Sie sicher, "
|
|||
|
+ "dass die E-Mail-Addressen miteinander übereinstimmen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(repeatEmailAddress, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Ein Passwort muss aus mindestens sechs Zeichen bestehen.
|
|||
|
* Außerdem muss das Passwort mindestens einen Groß- und Kleinbuchstaben
|
|||
|
* (Basis-Lateinisch und Umlaute), eine Ziffer
|
|||
|
* und eines der folgenden Sonderzeichen enthalten:
|
|||
|
* [!°`´@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]
|
|||
|
*/
|
|||
|
function checkPassword() {
|
|||
|
var regex_password = /^(?=.*[A-ZÄÖÜ])(?=.*[a-zäöüß])(?=.*[0-9])(?=.*[!°`´@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{6,}$/;
|
|||
|
var password = document.getElementById("passwort");
|
|||
|
if (!(checkIfElementHasValue(password))) {
|
|||
|
showErrorMessage(password, 0, "Bitte füllen Sie das Feld aus.")
|
|||
|
return false;
|
|||
|
}
|
|||
|
// Fehlermeldung Anzahl Zeichen
|
|||
|
else if (!(/.{6,}/.test(password))) {
|
|||
|
showErrorMessage(password, 0,
|
|||
|
"Ihr Passwort muss eine Länge von mindestens sechs Zeichen haben.");
|
|||
|
}
|
|||
|
else if (!(regex_password.test(password.value))) {
|
|||
|
showErrorMessage(password, 0,
|
|||
|
"Ihr Passwort muss mindestens einen "
|
|||
|
+ "Groß- und Kleinbuchstaben (inklusive Umlaute und Eszett), "
|
|||
|
+ "eine Ziffer und ein Sonderzeichen enthalten.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(password, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Prüft die Übereinstimmung mit dem bereits eingegebenen Passwort.
|
|||
|
*/
|
|||
|
function checkRepeat_Password() {
|
|||
|
var password = document.getElementById("passwort");
|
|||
|
var repeatPassword = document.getElementById("passwortRep");
|
|||
|
if (!(checkIfElementHasValue(repeatPassword))) {
|
|||
|
showErrorMessage(repeatPassword, 0, "Bitte füllen Sie das Feld aus.")
|
|||
|
return false;
|
|||
|
}
|
|||
|
else if (repeatPassword.value != password.value) {
|
|||
|
showErrorMessage(repeatPassword, 0,
|
|||
|
"Bitte stellen Sie sicher, "
|
|||
|
+ "dass die Passwörter miteinander übereinstimmen.");
|
|||
|
return false;
|
|||
|
}
|
|||
|
else {
|
|||
|
removeErrorMessage(repeatPassword, 0);
|
|||
|
return true;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Prüft, ob alle Eingaben des Formulars vorhanden und gültig sind.
|
|||
|
* Ist dies der Fall, werden die Daten verarbeitet
|
|||
|
* und der Nutzer wird auf die Seite "Erfolgreich registriert" weitergeleitet.
|
|||
|
*/
|
|||
|
function checkForPossibleSubmit() {
|
|||
|
var firstName = checkFirstName();
|
|||
|
var lastName = checkLastName();
|
|||
|
var streetName = checkStreetName();
|
|||
|
var houseNumber = checkHouseNumber();
|
|||
|
var plz = checkPLZ();
|
|||
|
var city = checkCity();
|
|||
|
var emailAddress = checkEmailAddress();
|
|||
|
var repeatEmailAddress = checkRepeat_EmailAddress();
|
|||
|
var password = checkPassword();
|
|||
|
var repeatPassword = checkRepeat_Password();
|
|||
|
if (firstName && lastName && streetName && houseNumber && plz && city &&
|
|||
|
emailAddress && repeatEmailAddress && password && repeatPassword) {
|
|||
|
// TODO: Formular submitten.
|
|||
|
window.location.replace("registrierung_erfolgreich.html");
|
|||
|
|
|||
|
}
|
|||
|
else
|
|||
|
{
|
|||
|
// TODO: Soll irgendetwas passieren?
|
|||
|
return false;
|
|||
|
}
|
|||
|
}
|