Jasmin's Version Hinzugefügt
Nils
parent
6a07bb4179
commit
0b650be4e7
|
|
@ -1041,6 +1041,14 @@ font-size: 30px;
|
|||
|
||||
/*----- Registrierung-------*/
|
||||
|
||||
#errorMessage {
|
||||
color: red;
|
||||
display: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#registrierungTitel{
|
||||
position: absolute;
|
||||
font-size: 25px;
|
||||
|
|
@ -1079,27 +1087,22 @@ font-size: 30px;
|
|||
|
||||
.registrierenNormalesTextfeld{
|
||||
width: 275px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#strasse{
|
||||
width: 212px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#hausNummer{
|
||||
width: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#postleitzahl{
|
||||
width: 85px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#ort{
|
||||
width: 177px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.registrierenKnopf {
|
||||
|
|
@ -1131,9 +1134,6 @@ input[type=number] {
|
|||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
#registrierungFehler{
|
||||
color: red;
|
||||
}
|
||||
/*----- Registrierung Ende-------*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
|
|
@ -8,78 +9,115 @@
|
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="hauptcontainer">
|
||||
|
||||
<form action="">
|
||||
<form id="registrierungForm" action="">
|
||||
<div class="container">
|
||||
<span id="registrierungTitel" > Registrierung </span>
|
||||
<br>
|
||||
<p id="datenSchutzHinweisRegistrierung" > Über diese Webseite werden personenbezogene Daten erhoben und genutzt. Für Details, beziehen Sie sich bite auf die Seite Datenschutz.</p>
|
||||
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Registrierung <hr id="registrierungHr"> </h4>
|
||||
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Registrierung<hr id="registrierungHr"></h4>
|
||||
<br>
|
||||
<div id="registrierungInputDiv" >
|
||||
<label for="vorName"><b>Vorname</b></label>
|
||||
<br>
|
||||
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="nachName"><b>Nachname</b></label>
|
||||
<br>
|
||||
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||
<br>
|
||||
<input type="text" name="strasse" id="strasse" required>
|
||||
<label hidden for="hausNummer"><b>Hausnummer</b></label>
|
||||
<input type="number" name="hausnummer" id="hausNummer" required>
|
||||
<br>
|
||||
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||
<br>
|
||||
<input type="number" name="postleitzahl" id="postleitzahl" required>
|
||||
<label hidden for="ort"><b>Ort</b></label>
|
||||
<input type="text" name="ort" id="ort" required>
|
||||
<br>
|
||||
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||
<br>
|
||||
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||
<br>
|
||||
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="passwort"><b>Passwort</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required>
|
||||
<br>
|
||||
<p id="registrierungFehler"></p>
|
||||
<br>
|
||||
<button type="submit" class="registrierenKnopf" id="registrierenKnopf">Registrieren</button>
|
||||
|
||||
<div class="field">
|
||||
<label for="vorName"><b>Vorname</b></label>
|
||||
<br>
|
||||
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="nachName"><b>Nachname</b></label>
|
||||
<br>
|
||||
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||
<br>
|
||||
<input type="text" name="strasse" id="strasse" required>
|
||||
|
||||
<input type="text" name="hausnummer" id="hausNummer" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||
<br>
|
||||
<input type="text" name="postleitzahl" id="postleitzahl" required>
|
||||
|
||||
<input type="text" name="ort" id="ort" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||
<br>
|
||||
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||
<br>
|
||||
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="passwort"><b>Passwort</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||
<br>
|
||||
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required><br>
|
||||
<p id="errorMessage"></p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<input type="submit" value="Registrieren" class="registrierenKnopf">
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<details>
|
||||
|
|
@ -91,11 +129,8 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<script src="registrierungDatenPruefung.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
|
|
@ -129,6 +164,8 @@
|
|||
|
||||
</div>
|
||||
</footer>
|
||||
<script src="registrierungVerhalten.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
document.getElementById("registrierenKnopf").addEventListener('click', function (){
|
||||
var vorName = document.getElementById("vorName").value;
|
||||
var nachName = document.getElementById("nachName").value;
|
||||
var strasse = document.getElementById("strasse").value;
|
||||
var hausNummer = document.getElementById("hausNummer").value;
|
||||
var plz = document.getElementById("postleitzahl").value;
|
||||
var ort = document.getElementById("ort").value;
|
||||
var email = document.getElementById("email").value;
|
||||
var emailRep = document.getElementById("emailRep").value;
|
||||
var passwort = document.getElementById("passwort").value;
|
||||
var passwortRep = document.getElementById("passwortRep").value;
|
||||
|
||||
|
||||
//document.getElementById("datenSchutzHinweisRegistrierung").innerHTML = "Vorname: " + vorName + " nachName :" + nachName + " strasse: " + strasse + " hausNummer: " + hausNummer + " plz: " + plz + " ort: " + ort + " email: " + email + " emailRep: " + emailRep + " passwort: " + passwort + " passwortRep: " + passwortRep
|
||||
|
||||
|
||||
|
||||
function checkVorName(vorName){
|
||||
var listOfErrors = [];
|
||||
if (vorName.length <2){
|
||||
listOfErrors[listOfErrors.length] = ("Zu Kurz, muss mindestens 2 Buchstaben haben.") ;
|
||||
}
|
||||
if (vorName.match(/\d+/g) != null){
|
||||
listOfErrors[listOfErrors.length] = ("Unerlaubtes Zeichen, darf keine Zahlen beinhalten.");
|
||||
}
|
||||
|
||||
if (listOfErrors[0] == null) {
|
||||
return true;
|
||||
}
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkNachName (nachName){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkStrasse (strasse){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkHausnummer (hausNummer){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkPlz (plz){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkOrt (ort){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkPasswort (passwort){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
function checkPasswortRep (passwortRep){
|
||||
var listOfErrors = [];
|
||||
//TBI Überprüfung
|
||||
return listOfErrors;
|
||||
}
|
||||
|
||||
var errors = []
|
||||
|
||||
var errorVorName = checkVorName(vorName);
|
||||
var errorNachName = checkNachName(nachName);
|
||||
var errorStrasse = checkStrasse(strasse);
|
||||
var errorHausnummer = checkHausnummer(hausNummer);
|
||||
var errorPlz = checkPlz(plz);
|
||||
var errorOrt = checkOrt(ort);
|
||||
var errorPasswort = checkPasswort(passwort);
|
||||
var errorPasswortRep = checkPasswortRep(passwortRep);
|
||||
|
||||
if (!(typeof errorVorName == "boolean")){
|
||||
var errorVorNameString = "Vorname:<br>" + errorVorName.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorVorNameString;
|
||||
|
||||
if (!(typeof errorNachName == "boolean")){
|
||||
var errorNachNameString = "Nachname:<br>" + errorNachName.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorNachNameString;
|
||||
|
||||
if (!(typeof errorStrasse == "boolean")){
|
||||
var errorStrasseString = "Straße:<br>" + errorStrasse.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorStrasseString;
|
||||
|
||||
if (!(typeof errorHausnummer == "boolean")){
|
||||
var errorHausnummerString = "Hausnummer:<br>" + errorHausnummer.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorHausnummerString;
|
||||
|
||||
if (!(typeof errorPlz == "boolean")){
|
||||
var errorPlzString = "Postleitzahl:<br>" + errorPlz.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorPlzString;
|
||||
|
||||
if (!(typeof errorOrt == "boolean")){
|
||||
var errorOrtString = "Ort:<br>" + errorOrt.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorOrtString;
|
||||
|
||||
if (!(typeof errorPasswort == "boolean")){
|
||||
var errorPasswortString = "Passwort:<br>" + errorPasswort.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorPasswortString;
|
||||
|
||||
if (!(typeof errorPasswortRep == "boolean")){
|
||||
var errorPasswortRepString = "Passwort bestätigen:<br>" + errorPasswortRep.join("<br>")
|
||||
}
|
||||
errors[errors.length] = errorPasswortRepString;
|
||||
|
||||
|
||||
if (errors.length === 0){
|
||||
window.open("registrierungErfolgreich.html", "_self")
|
||||
} else {
|
||||
document.getElementById("vorName").value = vorName;
|
||||
document.getElementById("nachName").value = nachName;
|
||||
document.getElementById("strasse").value = strasse;
|
||||
document.getElementById("hausNummer").value = hausNummer;
|
||||
document.getElementById("postleitzahl").value = plz;
|
||||
document.getElementById("ort").value = ort;
|
||||
document.getElementById("email").value = email;
|
||||
document.getElementById("emailRep").value = emailRep;
|
||||
document.getElementById("passwort").value = passwort;
|
||||
document.getElementById("passwortRep").value = passwortRep;
|
||||
document.getElementById("registrierungFehler").innerHTML = errors.join("<br>");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta lang="de"/>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="device=device-width, initial-scaling=1"/>
|
||||
<link rel="Stylesheet" type="text/css" href="probestyle.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>Candle Bibliothek</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="192"/> </a>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
<div>
|
||||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="buecher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meinebuecher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
|
||||
<a href="warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
|
||||
width="50" height="50"/> </a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="hauptcontainer">
|
||||
|
||||
<form action="">
|
||||
<div class="container">
|
||||
<div id="registrierungTitel" > Registrierung Erfolgreich</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<script src="registrierungErfolgreich.js"></script>
|
||||
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||
<script>
|
||||
var widthissue = false;
|
||||
window.addEventListener("resize", function(event) {
|
||||
if(window.innerWidth > 800 && widthissue) {
|
||||
widthissue = false
|
||||
unset()
|
||||
}
|
||||
else if(window.innerWidth < 800) widthissue = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<nav id="activeid" class="active">
|
||||
<div class="navLinks">
|
||||
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
|
||||
<label for="nav-toggle" class="icon-burger" >
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
<a id="kontakt" href="kontakt.html">Kontakt</a>
|
||||
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,423 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue