Jasmin's Version Hinzugefügt
Nils
parent
6a07bb4179
commit
0b650be4e7
|
|
@ -1041,6 +1041,14 @@ font-size: 30px;
|
||||||
|
|
||||||
/*----- Registrierung-------*/
|
/*----- Registrierung-------*/
|
||||||
|
|
||||||
|
#errorMessage {
|
||||||
|
color: red;
|
||||||
|
display: none;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
#registrierungTitel{
|
#registrierungTitel{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
|
@ -1079,27 +1087,22 @@ font-size: 30px;
|
||||||
|
|
||||||
.registrierenNormalesTextfeld{
|
.registrierenNormalesTextfeld{
|
||||||
width: 275px;
|
width: 275px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#strasse{
|
#strasse{
|
||||||
width: 212px;
|
width: 212px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#hausNummer{
|
#hausNummer{
|
||||||
width: 50px;
|
width: 50px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#postleitzahl{
|
#postleitzahl{
|
||||||
width: 85px;
|
width: 85px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#ort{
|
#ort{
|
||||||
width: 177px;
|
width: 177px;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.registrierenKnopf {
|
.registrierenKnopf {
|
||||||
|
|
@ -1131,9 +1134,6 @@ input[type=number] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
#registrierungFehler{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
/*----- Registrierung Ende-------*/
|
/*----- Registrierung Ende-------*/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta lang="de"/>
|
<meta lang="de"/>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
|
|
@ -8,7 +9,9 @@
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<title>Candle Bibliothek</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1 class="kopf" >
|
<h1 class="kopf" >
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
@ -30,10 +33,9 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<div class="hauptcontainer">
|
<div class="hauptcontainer">
|
||||||
|
|
||||||
<form action="">
|
<form id="registrierungForm" action="">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span id="registrierungTitel" > Registrierung </span>
|
<span id="registrierungTitel" > Registrierung </span>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -41,45 +43,81 @@
|
||||||
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Registrierung<hr id="registrierungHr"></h4>
|
<h4 id="registrierungAngabenZurRegistrierung">Angaben zur Registrierung<hr id="registrierungHr"></h4>
|
||||||
<br>
|
<br>
|
||||||
<div id="registrierungInputDiv" >
|
<div id="registrierungInputDiv" >
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="vorName"><b>Vorname</b></label>
|
<label for="vorName"><b>Vorname</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required>
|
<input type="text" name="vorName" id="vorName" class="registrierenNormalesTextfeld" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="nachName"><b>Nachname</b></label>
|
<label for="nachName"><b>Nachname</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required>
|
<input type="text" name="nachName" id="nachName" class="registrierenNormalesTextfeld" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
<label for="strasse"><b>Straße und Hausnummer</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="text" name="strasse" id="strasse" required>
|
<input type="text" name="strasse" id="strasse" required>
|
||||||
<label hidden for="hausNummer"><b>Hausnummer</b></label>
|
|
||||||
<input type="number" name="hausnummer" id="hausNummer" required>
|
<input type="text" name="hausnummer" id="hausNummer" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
<label for="postleitzahl"><b>Postleitzahl und Ort</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="number" name="postleitzahl" id="postleitzahl" required>
|
<input type="text" name="postleitzahl" id="postleitzahl" required>
|
||||||
<label hidden for="ort"><b>Ort</b></label>
|
|
||||||
<input type="text" name="ort" id="ort" required>
|
<input type="text" name="ort" id="ort" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="email"><b>E-Mail-Adresse</b></label>
|
<label for="email"><b>E-Mail-Adresse</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required>
|
<input type="email" name="email" id="email" class="registrierenNormalesTextfeld" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
<label for="emailRep"><b>E-Mail-Adresse bestätigen</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required>
|
<input type="email" name="emailRep" id="emailRep" class="registrierenNormalesTextfeld" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="passwort"><b>Passwort</b></label>
|
<label for="passwort"><b>Passwort</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required>
|
<input type="password" name="passwort" id="passwort" class="registrierenNormalesTextfeld" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
<label for="passwortRep"><b>Passwort bestätigen</b></label>
|
||||||
<br>
|
<br>
|
||||||
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required>
|
<input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required><br>
|
||||||
|
<p id="errorMessage"></p>
|
||||||
<br>
|
<br>
|
||||||
<p id="registrierungFehler"></p>
|
</div>
|
||||||
<br>
|
|
||||||
<button type="submit" class="registrierenKnopf" id="registrierenKnopf">Registrieren</button>
|
<div class="field">
|
||||||
|
<input type="submit" value="Registrieren" class="registrierenKnopf">
|
||||||
|
</div>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
|
|
@ -91,11 +129,8 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Link JS file-->
|
<!--Link JS file-->
|
||||||
<script src="burgerIcon.js"></script>
|
<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-->
|
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
|
||||||
<script>
|
<script>
|
||||||
var widthissue = false;
|
var widthissue = false;
|
||||||
|
|
@ -129,6 +164,8 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="registrierungVerhalten.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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