// TODO: Aufräumen // TODO: Meldungen spezifizieren // 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.
" + "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 (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: // 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 // Frießenstr. -> Fehlermeldung Erlaubte Zeichen // D -> Fehlermeldung Anzahl Zeichen // 1234 -> Fehlermeldung Ziffern // kurt-Romstöck-Ring -> Fehlermeldung Groß- und Kleinschreibung // Rue de Saint-Germain-lès-Corbeil -> Fehlermeldung Erlaubte Zeichen function checkStreetName() { var regex_streetName = /^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']*([ -]?[A-Za-z0-9ÄÖÜäöüß][A-Za-z0-9ÄÖÜäöüß']*)+$/; 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]/.test(streetName.value)) { showErrorMessage(streetName, 0, "Ein Straßenname darf nicht mit einer Ziffer beginnen."); return false; } // Fehlermeldung Groß- und Kleinschreibung else if (!(/^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']*([ -]?[A-Za-z0-9ÄÖÜäöüß][A-Za-z0-9ÄÖÜäöüß']*)+$/).test(streetName.value)) { showErrorMessage(streetName, 0, "Jeder Teil des Straßennamens muss mit einem Großbuchstaben beginnen."); } // 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.
Bitte stellen Sie sicher, " + "dass alle Abkürzungen ausgeschrieben sind."); 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. */ // 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, " + "welche aus Ziffern und maximal einem Kleinbuchstaben " + "am Ende der Hausnummer besteht."; 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. * Die kleinste mögliche Postzahl ist 01001. */ // 67547 // 08123 function checkPLZ() { // TODO: Regex Postleitzahl anpassen. var regex_plz = /^(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})$/; 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, " + "welche aus fünf Ziffern besteht."; 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 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, 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, "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, " + "welches aus mindestens sechs Zeichen besteht." + "Außerdem muss das Passwort mindestens einen " + "Groß- und Kleinbuchstaben (Basis-Lateinisch und Umlaute), " + "eine Ziffer und ein Sonderzeichen enthalten."); 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. window.location.replace("registrierungErfolgreich.html"); } else { // TODO: Soll irgendetwas passieren? return false; } }