registrierungDatenPruefung.js angefangen und registrierungErfolgreich.html erstellt

probestyle.css

@@ -1131,6 +1131,9 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+#registrierungFehler{
+  color: red;
+}
 /*----- Registrierung Ende-------*/
 
 

registrierung.html

@@ -52,11 +52,13 @@
                         <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>
@@ -75,7 +77,9 @@
                         <br>
                         <input type="password" name="passwortRep" id="passwortRep" class="registrierenNormalesTextfeld" required>
                         <br>
-                        <button type="submit" class="registrierenKnopf">Registrieren</button>
+                        <p id="registrierungFehler"></p>
+                        <br>
+                        <button type="submit" class="registrierenKnopf" id="registrierenKnopf">Registrieren</button>
                         <br><br>
 
                         <details>
@@ -91,6 +95,7 @@
 
         <!--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;

registrierungDatenPruefung.js

@@ -0,0 +1,190 @@
+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>");
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+});

registrierungErfolgreich.html

@@ -0,0 +1,84 @@
+<!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>