Candle/registrierungVerhalten.js

// TODO: Problemmeldungen spezifizieren

// 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 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) {
    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;
    }
}

/**
 * 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.
        // TODO: Alert entfernen.
        alert("Placeholder Alert: Die Daten würden jetzt verarbeitet werden.")
        window.location.replace("registrierungErfolgreich.html");

    }
    else
    {
        // TODO: Alert entfernen, soll irgendetwas passieren?
        alert("Da stimmt aber etwas nicht mit den Daten. :(");
        return false;
    }
}