424 lines
15 KiB
JavaScript
424 lines
15 KiB
JavaScript
// Großbuchstaben -> [A-Z]
|
||
// Kleinbuchstaben -> [a-z]
|
||
// Bindestrich -> [-]
|
||
// Unterstrich -> [_]
|
||
// Leerzeichen -> [ ]
|
||
// Großbuchstaben (Umlaute) -> [ÄÖÜ]
|
||
// Kleinbuchstaben (Umlaute) -> [äöü]
|
||
// Großbuchstaben (Lateinisch-1, Ergänzung) -> [\u00C0-\u00D6\u00D8-\u00DE]
|
||
// Kleinbuchstaben (Lateinisch-1, Ergänzung) -> [\u00DF-\u00F6\u00F8-\u00FF]
|
||
// Großbuchstaben (Lateinisch, erweitert-A)
|
||
// -> [ĀĂĄĆĈĊČĎĐĒĔĖĘĚĜĞĠĢĤĦĨĪĬĮİIJĴĶĹĻĽĿŁŃŅŇŊŌŎŐŒŔŖŘŚŜŞŠŢŤŦŨŪŬŮŰŲŴŶŸŹŻŽ]
|
||
// Kleinbuchstaben (Lateinisch, erweitert-A)
|
||
// -> [āăąćĉċčďđēĕėęěĝğġģĥħĩīĭįıijĵķĸĺļľŀłńņňŋōŏőœŕŗřśŝşšţťŧũūŭůűųŵŷźżžſ]
|
||
// Sonderzeichen -> [°^!"§$%&/{}()[]=?\´`@€+*~#'<>|,;.:-_]
|
||
|
||
//------------------------------------------------------------------------------
|
||
|
||
/**
|
||
* String mit allen erlaubten Großbuchstaben.
|
||
*/
|
||
var uC
|
||
= "A-Z"
|
||
+ "\u00C0-\u00D6\u00D8-\u00DE"
|
||
+ "ĀĂĄĆĈĊČĎĐĒĔĖĘĚĜĞĠĢĤĦĨĪĬĮİIJĴĶĹĻĽĿŁŃŅŇŊŌŎŐŒŔŖŘŚŜŞŠŢŤŦŨŪŬŮŰŲŴŶŸŹŻŽ";
|
||
|
||
/**
|
||
* String mit allen erlaubten Kleinbuchstaben
|
||
*/
|
||
var lC = "a-z"
|
||
+ "\u00DF-\u00F6\u00F8-\u00FF"
|
||
+ "āăąćĉċčďđēĕėęěĝğġģĥħĩīĭįıijĵķĸĺļľŀłńņňŋōŏőœŕŗřśŝşšţťŧũūŭůűųŵŷźżžſ";
|
||
|
||
//------------------------------------------------------------------------------
|
||
|
||
// 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 das Formular hinzufügen.
|
||
document.getElementById("registrierungForm")
|
||
.addEventListener("submit", checkForPossibleSubmit());
|
||
|
||
//------------------------------------------------------------------------------
|
||
|
||
function checkForPossibleSubmit(event) {
|
||
event.prevenDefault();
|
||
|
||
var isFirstNameValid = checkFirstName();
|
||
}
|
||
|
||
/**
|
||
* Ü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) {
|
||
if (element.value == "" || element.value == null) {
|
||
return false;
|
||
}
|
||
else {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Zeigt eine Fehlermeldung unter dem übergebenen Eingabefeld ein.
|
||
*
|
||
* @param inputField Eingabefeld, unter dem die Meldung erscheinen soll.
|
||
* @param message Fehlermeldung, die angezeigt werden soll.
|
||
*/
|
||
function showErrorMessage(inputField, message) {
|
||
inputField.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = inputField.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML = message;
|
||
errorMessage.style.display = "block";
|
||
}
|
||
|
||
/**
|
||
* Entfernt eine Fehlermeldung, falls vorhanden.
|
||
*
|
||
* @param inputField Eingabefeld, dessen Meldung entfernt werden soll.
|
||
*/
|
||
function removeErrorMessage(inputField) {
|
||
inputField.style.border = "2px solid #70AD47"
|
||
var classOfInputField = inputField.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
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
|
||
// Björn
|
||
// Kristín
|
||
// Zoë
|
||
// Miraç
|
||
// Đorđe
|
||
function checkFirstName() {
|
||
var regex_firstName = new RegExp(`^[${uC}][${lC}]+([- ][${uC}][${lC}]+)*$`);
|
||
var firstName = document.getElementById("vorName");
|
||
if (!(checkIfElementHasValue(firstName))) {
|
||
showErrorMessage(firstName, "Bitte füllen Sie das Feld aus.")
|
||
return false;
|
||
}
|
||
else if (!(regex_firstName.test(firstName.value))) {
|
||
showErrorMessage(firstName, "Bitte geben Sie einen gültigen Vornamen ein.");
|
||
return false;
|
||
}
|
||
else {
|
||
removeErrorMessage(firstName);
|
||
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
|
||
// Jäger
|
||
// de Bÿl
|
||
// Čović
|
||
function checkLastName() {
|
||
var regex_lastName = new RegExp(`^[${uC}${lC}][${lC}]+([- ][${uC}][${lC}]+)*$`);
|
||
var lastName = document.getElementById("nachName");
|
||
if (!(checkIfElementHasValue(lastName))) {
|
||
showErrorMessage(lastName, "Bitte füllen Sie das Feld aus.")
|
||
return false;
|
||
}
|
||
else if (!(regex_lastName.test(lastName.value))) {
|
||
showErrorMessage(lastName, "Bitte geben Sie einen gültigen Nachnamen ein.");
|
||
return false;
|
||
}
|
||
else {
|
||
removeErrorMessage(lastName);
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Ein Straßenname kann aus Buchstaben (Basis-Lateinisch und 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:
|
||
// Caldicotstr.
|
||
// Straße 73
|
||
// Kurt-Romstöck-Ring
|
||
// Laehr'scher Jagdweg
|
||
// D 4
|
||
function checkStreetName() {
|
||
var regex_streetName
|
||
= /^[A-ZÄÖÜ0-9][ -]?[a-zäöü0-9ß']*([ -]?[A-Za-z0-9ÄÖÜäöüß][A-Za-z0-9ÄÖÜäöüß']*)+[.]?$/;
|
||
var streetName = document.getElementById("strasse");
|
||
if (!(checkIfElementHasValue(streetName))) {
|
||
streetName.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = streetName.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML = "Bitte füllen Sie das Feld Straße aus.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else if (!(regex_streetName.test(streetName.value))) {
|
||
streetName.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = streetName.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML
|
||
= "Bitte geben Sie einen gültigen Straßennamen ein.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else {
|
||
streetName.style.border = "2px solid #70AD47"
|
||
var classOfInputField = streetName.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML = "";
|
||
errorMessage.style.display = "none";
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Eine Hausnummer kann aus Ziffern und maximal einem Kleinbuchstaben bestehen.
|
||
* Jede Hausnummer beginnt mit mindestens einer Ziffer.
|
||
*/
|
||
// 54
|
||
// 2a
|
||
function checkHouseNumber() {
|
||
var regex_houseNumber = /^[0-9]+[a-z]?$/;
|
||
var houseNumber = document.getElementById("hausNummer");
|
||
if (!(checkIfElementHasValue(houseNumber))) {
|
||
houseNumber.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = houseNumber.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
|
||
errorMessage.innerHTML = "Bitte füllen Sie das Feld Hausnummer aus.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else if (!(regex_houseNumber.test(houseNumber.value))) {
|
||
houseNumber.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = houseNumber.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
|
||
errorMessage.innerHTML = "Bitte geben Sie eine gültige Hausnummer ein.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else {
|
||
houseNumber.style.border = "2px solid #70AD47"
|
||
var classOfInputField = houseNumber.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
|
||
errorMessage.innerHTML = "";
|
||
errorMessage.style.display = "none";
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern.
|
||
*/
|
||
// 67547
|
||
// 08123
|
||
function checkPLZ() {
|
||
var regex_plz = /^[0-9]{5}$/;
|
||
var plz = document.getElementById("postleitzahl");
|
||
if (!(checkIfElementHasValue(plz))) {
|
||
plz.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = plz.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML = "Bitte füllen Sie das Feld Postleitzahl aus.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else if (!(regex_plz.test(plz.value))) {
|
||
plz.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = plz.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML
|
||
= "Bitte geben Sie eine gültige Postleitzahl ein.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else {
|
||
plz.style.border = "2px solid #70AD47"
|
||
var classOfInputField = plz.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
|
||
errorMessage.innerHTML = "";
|
||
errorMessage.style.display = "none";
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Ein Stadtname besteht aus Buchstaben (Basis-Lateinisch und Umlaute),
|
||
* 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 und bei Abkürzungen mit einem Punkt
|
||
* abgeschlossen werden.
|
||
*/
|
||
// Beispiele zum Testen:
|
||
// Füssen
|
||
// Frankenberg/Sa.
|
||
// Eschenbach in der Oberpfalz
|
||
// Auma-Weidatal
|
||
// Gießen
|
||
// St. Ingbert
|
||
function checkCity() {
|
||
const regex_city = /^[A-ZÄÖÜ][a-zäöüß]*([.]?[ -/][A-ZÄÖÜa-zäöüß]*)*$/;
|
||
var city = document.getElementById("ort");
|
||
if (!(checkIfElementHasValue(city))) {
|
||
city.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = city.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
|
||
errorMessage.innerHTML = "Bitte füllen Sie das Feld Ort aus.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else if (!(regex_city.test(city.value))) {
|
||
city.style.border = "2px solid #F22C2C"
|
||
var classOfInputField = city.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
|
||
errorMessage.innerHTML = "Bitte geben Sie einen gültigen Ort ein.";
|
||
errorMessage.style.display = "block";
|
||
return false;
|
||
}
|
||
else {
|
||
city.style.border = "2px solid #70AD47"
|
||
var classOfInputField = city.parentElement;
|
||
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
|
||
errorMessage.innerHTML = "";
|
||
errorMessage.style.display = "none";
|
||
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 folgende Sonderzeichen enthalten 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.
|
||
*
|
||
*/
|
||
function checkEmailAddress() {
|
||
const regex_emailAddress = /[A-Za-z_]+[@][A-Za-z]+[.][A-Za-z]{2,}/;
|
||
var emailAddress = document.getElementById("email");
|
||
if (!(checkIfElementHasValue(emailAddress))) {
|
||
showErrorMessage(emailAddress, "Bitte füllen Sie das Feld aus.")
|
||
return false;
|
||
}
|
||
else if (!(regex_emailAddress.test(emailAddress.value))) {
|
||
showErrorMessage
|
||
(emailAddress, "Bitte geben Sie eine gültige E-Mail-Addresse ein.");
|
||
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, "Bitte füllen Sie das Feld aus.")
|
||
return false;
|
||
}
|
||
else if (emailAddress.value != repeatEmailAddress.value) {
|
||
showErrorMessage
|
||
(repeatEmailAddress, "Bitte stellen Sie sicher, dass die E-Mail-Addressen miteinander übereinstimmen.");
|
||
return false;
|
||
}
|
||
else {
|
||
removeErrorMessage(repeatEmailAddress);
|
||
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, "Bitte füllen Sie das Feld aus.")
|
||
return false;
|
||
}
|
||
else if (!(regex_password.test(password.value))) {
|
||
showErrorMessage
|
||
(password, "Bitte geben Sie ein gültiges Passwort ein.");
|
||
return false;
|
||
}
|
||
else {
|
||
removeErrorMessage(password);
|
||
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, "Bitte füllen Sie das Feld aus.")
|
||
return false;
|
||
}
|
||
else if (repeatPassword.value != password.value) {
|
||
showErrorMessage
|
||
(repeatPassword, "Bitte stellen Sie sicher, dass die Passwörter miteinander übereinstimmen.");
|
||
return false;
|
||
}
|
||
else {
|
||
removeErrorMessage(repeatPassword);
|
||
return true;
|
||
}
|
||
}
|
||
|