Candle/registrierungVerhalten.js

424 lines
15 KiB
JavaScript
Raw Normal View History

2023-05-09 11:25:04 +02:00
// 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;
}
}