diff --git a/registrierung.html b/registrierung.html index fa002a2..171b5bb 100644 --- a/registrierung.html +++ b/registrierung.html @@ -167,7 +167,7 @@ - + diff --git a/registrierungVerhalten.js b/registrierung_verhalten.js similarity index 70% rename from registrierungVerhalten.js rename to registrierung_verhalten.js index a49573d..e9dc785 100644 --- a/registrierungVerhalten.js +++ b/registrierung_verhalten.js @@ -1,5 +1,4 @@ // TODO: Aufräumen -// TODO: Meldungen spezifizieren // Großbuchstaben -> [A-Z] // Kleinbuchstaben -> [a-z] @@ -147,7 +146,8 @@ function checkFirstName() { return false; } // Fehlermeldung Groß- und Kleinschreibung - else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([- ][A-ZÄÖÜ][a-zäöüß]+)*$/.test(firstName.value))) { + 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. " @@ -268,7 +268,7 @@ function checkLastName() { } /** - * Ein Straßenname kann aus Buchstaben (Basis-Lateinisch und Umlaute), Ziffern + * 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. @@ -281,15 +281,16 @@ function checkLastName() { // 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 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))) { @@ -304,18 +305,13 @@ function checkStreetName() { return false; } // Fehlermeldung Ziffern - else if (/^[0-9]/.test(streetName.value)) { + else if (!(/^[^0-9]*$|[0-9]$/.test(streetName.value))) { showErrorMessage(streetName, 0, - "Ein Straßenname darf nicht mit einer Ziffer beginnen."); + "Ziffern und Zahlen dürfen nur am Ende des Straßennamens stehen."); 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))) { + 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 " @@ -323,6 +319,21 @@ function checkStreetName() { + "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; @@ -333,36 +344,46 @@ function checkStreetName() { * Eine Hausnummer kann aus Ziffern und maximal einem Kleinbuchstaben bestehen. * Jede Hausnummer beginnt mit mindestens einer Ziffer. */ -// 54 -// 2a +// 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 regex_houseNumber = /^[0-9]+[a-z]?$/; var houseNumber = document.getElementById("hausNummer"); + // Fehlermeldung Leeres Feld 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"; + showErrorMessage(houseNumber, 1, + "Bitte füllen Sie das Feld Hausnummer aus."); 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"; + // 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 { - houseNumber.style.border = "2px solid #70AD47" - var classOfInputField = houseNumber.parentElement; - var errorMessage = classOfInputField.getElementsByTagName('p')[1]; - errorMessage.innerHTML = ""; - errorMessage.style.display = "none"; + removeErrorMessage(houseNumber, 1); return true; } } @@ -371,79 +392,117 @@ function checkHouseNumber() { * Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern. * Die kleinste mögliche Postzahl ist 01001. */ -// 67547 -// 08123 +// Beispiele zum Testen: +// 67547 -> Keine Fehlermeldung +// 08123 -> Keine Fehlermeldung +// -> Fehlermeldung Leeres Feld +// -> Fehlermeldung Leeres Feld +// 00000 -> Fehlermeldung Syntax 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"); + // Fehlermeldung Leeres Feld 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"; + showErrorMessage(plz, 0, + "Bitte füllen Sie das Feld Postleitzahl aus."); 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"; + // 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 { - plz.style.border = "2px solid #70AD47" - var classOfInputField = plz.parentElement; - var errorMessage = classOfInputField.getElementsByTagName('p')[0]; - errorMessage.innerHTML = ""; - errorMessage.style.display = "none"; + removeErrorMessage(plz, 0); return true; } } /** - * Ein Stadtname besteht aus Buchstaben (Basis-Lateinisch und Umlaute), + * 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 und bei Abkürzungen mit einem Punkt - * abgeschlossen werden. + * oder einen Schrägstrich getrennt werden. */ // Beispiele zum Testen: -// Füssen -// Frankenberg/Sa. -// Eschenbach in der Oberpfalz -// Auma-Weidatal -// Gießen -// St. Ingbert +// 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() { - const regex_city = /^[A-ZÄÖÜ][a-zäöüß]*([.]?[ -/][A-ZÄÖÜa-zäöüß]*)*$/; var city = document.getElementById("ort"); + // Fehlermeldung Leeres Feld 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"; + showErrorMessage(city, 1, + "Bitte füllen Sie das Feld Ort aus."); 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"; + // 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 { - city.style.border = "2px solid #70AD47" - var classOfInputField = city.parentElement; - var errorMessage = classOfInputField.getElementsByTagName('p')[1]; - errorMessage.innerHTML = ""; - errorMessage.style.display = "none"; + removeErrorMessage(city, 1); return true; } } @@ -468,16 +527,18 @@ function checkCity() { * 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-z_]+[@][A-Za-z]+[.][A-Za-z]{2,}/; + 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, "Bitte füllen Sie das Feld aus.") + showErrorMessage(emailAddress, 0, "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."); + 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 { @@ -520,20 +581,23 @@ 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.") + 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, - "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), " + 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); + removeErrorMessage(password, 0); return true; } } @@ -545,17 +609,17 @@ 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.") + showErrorMessage(repeatPassword, 0, "Bitte füllen Sie das Feld aus.") return false; } else if (repeatPassword.value != password.value) { - showErrorMessage(repeatPassword, + showErrorMessage(repeatPassword, 0, "Bitte stellen Sie sicher, " + "dass die Passwörter miteinander übereinstimmen."); return false; } else { - removeErrorMessage(repeatPassword); + removeErrorMessage(repeatPassword, 0); return true; } } @@ -579,7 +643,7 @@ function checkForPossibleSubmit() { if (firstName && lastName && streetName && houseNumber && plz && city && emailAddress && repeatEmailAddress && password && repeatPassword) { // TODO: Formular submitten. - window.location.replace("registrierungErfolgreich.html"); + window.location.replace("registrierung_erfolgreich.html"); } else