diff --git a/probestyle.css b/probestyle.css
index 58b9eaf..c45e4cf 100644
--- a/probestyle.css
+++ b/probestyle.css
@@ -1085,7 +1085,7 @@ font-size: 30px;
color: #664220;
}
-.registrierenNormalesTextfeld{
+.registrierenNormalesTextfeld, #errorMessage {
width: 275px;
}
diff --git a/registrierungVerhalten.js b/registrierungVerhalten.js
index 6411779..a49573d 100644
--- a/registrierungVerhalten.js
+++ b/registrierungVerhalten.js
@@ -1,4 +1,5 @@
-// TODO: Problemmeldungen spezifizieren
+// TODO: Aufräumen
+// TODO: Meldungen spezifizieren
// Großbuchstaben -> [A-Z]
// Kleinbuchstaben -> [a-z]
@@ -7,33 +8,10 @@
// 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);
@@ -66,7 +44,9 @@ document.getElementById("registrierungForm")
* @returns false -> Feld wurde nicht ausgefüllt; true -> Feld wurde ausgefüllt.
*/
function checkIfElementHasValue(element) {
- if (element.value == "" || element.value == null) {
+ regex_onlyWhitespaces = /^\s*$/;
+ if (element.value == "" || element.value == null
+ || regex_onlyWhitespaces.test(element.value)) {
return false;
}
else {
@@ -78,12 +58,13 @@ function checkIfElementHasValue(element) {
* 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, message) {
+function showErrorMessage(inputField, pNumber, message) {
inputField.style.border = "2px solid #F22C2C"
var classOfInputField = inputField.parentElement;
- var errorMessage = classOfInputField.getElementsByTagName('p')[0];
+ var errorMessage = classOfInputField.getElementsByTagName('p')[pNumber];
errorMessage.innerHTML = message;
errorMessage.style.display = "block";
}
@@ -92,11 +73,12 @@ function showErrorMessage(inputField, message) {
* 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) {
+function removeErrorMessage(inputField, pNumber) {
inputField.style.border = "2px solid #70AD47"
var classOfInputField = inputField.parentElement;
- var errorMessage = classOfInputField.getElementsByTagName('p')[0];
+ var errorMessage = classOfInputField.getElementsByTagName('p')[pNumber];
errorMessage.style.display = "none";
}
@@ -107,25 +89,80 @@ function removeErrorMessage(inputField) {
* oder Bindestrich getrennt werden.
*/
// Beispiele zum Testen:
-// Anna
-// Björn
-// Kristín
-// Zoë
-// Miraç
-// Đorđe
+// 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 regex_firstName = new RegExp(`^[${uC}][${lC}]+([- ][${uC}][${lC}]+)*$`);
var firstName = document.getElementById("vorName");
+ // Fehlermeldung Leeres Feld
if (!(checkIfElementHasValue(firstName))) {
- showErrorMessage(firstName, "Bitte füllen Sie das Feld aus.")
+ showErrorMessage(firstName, 0, "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.");
+ // 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);
+ removeErrorMessage(firstName, 0);
return true;
}
}
@@ -137,23 +174,95 @@ function checkFirstName() {
* oder Bindestrich getrennt werden.
*/
// Beispiele zum Testen:
-// Schulze
-// Jäger
-// de Bÿl
-// Čović
+// 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 regex_lastName = new RegExp(`^[${uC}${lC}][${lC}]+([- ][${uC}][${lC}]+)*$`);
var lastName = document.getElementById("nachName");
+ // Fehlermeldung Leeres Feld
if (!(checkIfElementHasValue(lastName))) {
- showErrorMessage(lastName, "Bitte füllen Sie das Feld aus.")
+ showErrorMessage(lastName, 0, "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.");
+ // 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);
+ removeErrorMessage(lastName, 0);
return true;
}
}
@@ -167,38 +276,55 @@ function checkLastName() {
* welche mit einem Leerzeichen oder Bindestrich getrennt werden.
*/
// Beispiele zum Testen:
-// Caldicotstr.
-// Straße 73
-// Kurt-Romstöck-Ring
-// Laehr'scher Jagdweg
-// D 4
+// 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ÄÖÜ0-9][ -]?[a-zäöü0-9ß']*([ -]?[A-Za-z0-9ÄÖÜäöüß][A-Za-z0-9ÄÖÜäöüß']*)+[.]?$/;
+ = /^[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))) {
- 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";
+ showErrorMessage(streetName, 0,
+ "Bitte füllen Sie das Feld Straße aus.");
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";
+ // 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 {
- streetName.style.border = "2px solid #70AD47"
- var classOfInputField = streetName.parentElement;
- var errorMessage = classOfInputField.getElementsByTagName('p')[0];
- errorMessage.innerHTML = "";
- errorMessage.style.display = "none";
+ removeErrorMessage(streetName, 0);
return true;
}
}
@@ -224,7 +350,10 @@ function checkHouseNumber() {
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.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;
}
@@ -240,11 +369,13 @@ function checkHouseNumber() {
/**
* Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern.
+ * Die kleinste mögliche Postzahl ist 01001.
*/
// 67547
// 08123
function checkPLZ() {
- var regex_plz = /^[0-9]{5}$/;
+ // 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"
@@ -259,7 +390,8 @@ function checkPLZ() {
var classOfInputField = plz.parentElement;
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
errorMessage.innerHTML
- = "Bitte geben Sie eine gültige Postleitzahl ein.";
+ = "Bitte geben Sie eine gültige Postleitzahl ein, "
+ + "welche aus fünf Ziffern besteht.";
errorMessage.style.display = "block";
return false;
}
@@ -320,7 +452,7 @@ function checkCity() {
* 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.
+ * und verschiedene Sonderzeichen enthalten.
*
* Der ganze Lokalteil oder Teilabschnitte
* können mit Anführungszeichen umschlossen werden.
@@ -361,16 +493,18 @@ 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.")
+ showErrorMessage(repeatEmailAddress, 0,
+ "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.");
+ showErrorMessage(repeatEmailAddress, 0,
+ "Bitte stellen Sie sicher, "
+ + "dass die E-Mail-Addressen miteinander übereinstimmen.");
return false;
}
else {
- removeErrorMessage(repeatEmailAddress);
+ removeErrorMessage(repeatEmailAddress, 0);
return true;
}
}
@@ -390,8 +524,12 @@ function checkPassword() {
return false;
}
else if (!(regex_password.test(password.value))) {
- showErrorMessage
- (password, "Bitte geben Sie ein gültiges Passwort ein.");
+ 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 {
@@ -411,8 +549,9 @@ function checkRepeat_Password() {
return false;
}
else if (repeatPassword.value != password.value) {
- showErrorMessage
- (repeatPassword, "Bitte stellen Sie sicher, dass die Passwörter miteinander übereinstimmen.");
+ showErrorMessage(repeatPassword,
+ "Bitte stellen Sie sicher, "
+ + "dass die Passwörter miteinander übereinstimmen.");
return false;
}
else {
@@ -440,16 +579,12 @@ function checkForPossibleSubmit() {
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. :(");
+ // TODO: Soll irgendetwas passieren?
return false;
}
-}
-
+}
\ No newline at end of file