From 08bab7578d35b07520aebfde13334399900dbf03 Mon Sep 17 00:00:00 2001
From: RaphRiots <118174094+RaphRiots@users.noreply.github.com>
Date: Thu, 15 Dec 2022 16:54:19 +0100
Subject: [PATCH] v2

---
 assets/css/style.css |   4 +
 form.html            | 205 +++++++++++++++++++++++++++++++++++++++----
 2 files changed, 190 insertions(+), 19 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index c6f3277..278fc5b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -59,4 +59,8 @@ main{
     width: 160px;
     height: 120px;
     background-color: blue;
+}
+
+#comment{
+    font-size: 20px;
 }
\ No newline at end of file
diff --git a/form.html b/form.html
index 25d7c4c..206ea35 100644
--- a/form.html
+++ b/form.html
@@ -25,38 +25,205 @@
             <h1 id="app">Bitte trage deine vollständigen Angaben ein!</h1>
 
             <div class="alert alert-info border border-primary" role="alert">
+                <script>
 
-                <form id="form1" targer="_self" onsubmit="alertFunction()">
+
+                    // Validiert das Geschlecht
+                    function valGender(){
+                        var gender = document.getElementById("gender");
+                        if (gender.value == ""){
+                            //Wenn die "Auswahl" Option gewählt wurde, zeige mir den Display Error.
+                            setMessage1("Bitte Anrede auswählen!");
+                            return false;
+                        }
+                        return true;
+                        
+                    }
+
+                    // Validiert den Vornamen
+                    function valVorName() {
+                        let inputElement    = document.getElementById("vName");
+                        let value           = inputElement.value;
+                    
+                        if (!value){
+                            // Beispiele: " ", null, undefined */
+                            setMessage2("Bitte den Vornamen eingeben.");
+                        }
+                        else {
+                            setMessage2(value);
+                        }
+                    }
+
+                    // Validiert den Nachnamen
+                    function valNachName(){
+                        let inputElement    = document.getElementById("nName");
+                        let value           = inputElement.value;
+                    
+                        if (!value){
+                            // Beispiele: " ", null, undefined */
+                            setMessage3("Bitte den Nachnamen eingeben.");
+                        }
+                        else {
+                            setMessage3(value);
+                        }
+                    }
+
+                    function old(age){
+                        let.inputElement    =document.getElementById("bday");
+                        let value           =inputElement.value;
+                        if (age>=18){
+                            return'You can sign in you Perv.';
+                        }
+                        else{
+                            return'You must be at least 18 to sign up.'
+                        }
+                    }
+
+                    // Validiert die Email
+                    function valEmail() {
+                        let inputElement    = document.getElementById("email");
+                        let value           = inputElement.value;
+
+                        if (!value){
+                            // Beispiele: " ", null, undefined  
+                            setMessage2("Bitte E-Mail eingeben.");
+                        }
+                        /** 
+                        *! Ab hier enthält value einen nicht leeren String. */
+                        else if (value.indexOf("@") === -1){
+                            //value enhält KEIN '@' Symbol.
+                            setMessage2("Bitte in E-Mail ein '@' einfügen");
+                        }
+                        else {
+                            setMessage2(value);
+                        }
+                    }
+
+                    // Validiert die Postleitzahl
+                    function valPlz() {
+                        let inputElement    = document.getElementById("plz");
+                        let value           = inputElement.value;
+
+                        if (!value){
+                            // Beispiele: " ", null, undefined 
+                            setMessage4("Bitte Postleitzahl eingeben.");
+                        }
+                        else if (value < 1000 || value > 9658) { //NOT ( 1000<= n <= 9658})
+                            // Entweder ist die Zahl kleiner als 1 oder grösser als 9658.                   
+                            setMessage4("Entweder ist die Zahl kleiner als 1000 oder grösser als 9658.");
+                        }
+                        else {
+                            setMessage4(value);
+                        }
+                    }
+
+                    function setMessage1(value){
+                        document.getElementById("message-1").innerText = value;
+                    }
+                    function setMessage2(value){
+                        document.getElementById("message-2").innerText = value;
+                    }
+
+                    function setMessage3(value){
+                        document.getElementById("message-3").innerText = value;
+                    }
+
+                    function setMessage4(value){
+                        document.getElementById("message-4").innerText = value;
+                    }
+
+                    function alertFunction(){
+                        alert("Das Formular wurde abgeschickt.");
+                    }
+
+                    
+
+                </script>
+
+                <form id="form1" target="_self" onsubmit="alertFunction()">
                     <fieldset>
                         <legend><h1>Personalien:</h1></legend>
 
-                        <label for  ="gender">Geschlecht</label><br>
-                        <select id="gender">
-                          <option value="Mann">Mann</option>
-                          <option value="Frau">Frau</option>
-                          <option value="Non-Bin">Non-Binär</option>
-                        </select>
-                        <br>
+                        <label for  ="gender">Anrede:</label><br>
+                        <select id="gender" required="required">
+                            <option value="" selected disabled hidden>- Auswahl -</option>
+                            <option value="Mann">Mann</option>
+                            <option value="Frau">Frau</option>
+                            <option value="Non-Bin">Non-Binär</option>
+                        </select> *<br>
+
+                        <label for  ="firm">Firma:</label><br>
+                        <input type ="text"     id="firm"   name="firm"  placeholder="Global Corp."  ><br><br>
 
                         <label for  ="vName">Vorname:</label><br>
-                        <input type ="text"     id="vName"  name="vName"    /*value="Rio"*/         required><br>        
+                        <input type ="text"     id="vName"  name="vName" placeholder="Rio" required> *<br>        
                         
                         <label for  ="nName">Nachname:</label><br>
-                        <input type ="text"     id="nName"  name="nName"    /*value="Burbi"*/       required><br>
+                        <input type ="text"     id="nName"  name="nName" placeholder="Burbi"  required> *<br>
+
+                        <label for  ="bday">Geburtsdatum:</label><br>
+                        <input type ="date"     id="bday"   name="bday"  required min=""> *<br>
+
+                        <label for  ="nName">Strasse:</label><br>
+                        <input type ="text"     id="street" name="street"placeholder="YoMama Strasse"  required> *<br>
+
+                        <label for  ="plz"> PLZ:</label><br>
+                        <input type ="number"   id="plz"    name="plz"  min="1000" max="9658" placeholder="8000" required> *<br>
+
+<!--                         <label for  ="ort">Kanton:</label><br>
+                        <input type ="text"     id="ort"    name="ort" placeholder="Nowhere" required>  *<br> -->
+
+                        <label for  ="ort">Kanton:</label><br>
+                        <select id="ort" required="required">
+                            <option value="" selected disabled hidden>- Auswahl -</option>
+                            <option value="Aargau">Aargau</option>
+                            <option value="Appenzell Ausserrhoden">Appenzell Ausserrhoden</option>
+                            <option value="Appenzell Innerrhoden">Appenzell Innerrhoden</option>
+                            <option value="Basel-Landschaft">Basel-Landschaft</option>
+                            <option value="Basel-Stadt">Basel-Stadt</option>
+                            <option value="Bern">Bern</option>
+                            <option value="Freiburg">Freiburg</option>
+                            <option value="Genf">Genf</option>
+                            <option value="Glarus">Glarus</option>
+                            <option value="Graubünden">Graubünden</option>
+                            <option value="Jura">Jura</option>
+                            <option value="Luzern">Luzern</option>
+                            <option value="Neuenburg">Neuenburg</option>
+                            <option value="Nidwalden">Nidwalden</option>
+                            <option value="Obwalden">Obwalden</option>
+                            <option value="St.Gallen">St.Gallen</option>
+                            <option value="Schaffhausen">Schaffhausen</option>
+                            <option value="Schwyz">Schwyz</option>
+                            <option value="Solothurn">Solothurn</option>
+                            <option value="Tessin">Tessin</option>
+                            <option value="Thurgau">Thurgau</option>
+                            <option value="Uri">Uri</option>
+                            <option value="Waadt">Waadt</option>
+                            <option value="Wallis">Wallis</option>
+                            <option value="Zürich">Zürich</option>
+                            <option value="Zug">Zug</option>
+
+
+                        </select> *<br>
 
-                        <label for  ="birthday">Geburtstag:</label><br>
-                        <input type ="date"     id="birthday"  name="birthday"    /*value="Burbi"*/       required><br>
 
-                        <label for  ="firm">Firma:</label><br>
-                        <input type ="text"     id="firm"   name="firm"     /*value="Global Corp."*/ required><br><br>
-                        
                         <label for  ="email">E-Mail:</label><br>
-                        <input type ="email"    id="email"  name="email"     /*value="MayMusterFrau@zuerich.ch"*/ required><br><br> 
+                        <input type ="email"    id="email"  name="email" placeholder="MayMusterFrau@zuerich.ch" required> *<br>
+
+                        <label for  ="telG"> Telefon Geschäftlich:</label><br>
+                        <input type ="tel"   id="telG"     name="telG" placeholder="043 666 69 69" pattern="+41[0-9]{3}-[0-9]{2}-[0-9]{2}"><br>
+
+                        <label for  ="telP"> Telefon Privat:</label><br>
+                        <input type ="number"   id="telP"     name="telP" placeholder="076 666 69 69" > *<br>
+
+
+                        <label for  ="comment"> Bemerkungen:</label><br>
+                        <textarea id="comment" name="comment" rows="5" cols="30"  placeholder="Weitere Bemerkungen?"></textarea><br>
 
-                        <label for  ="age"> Alter (Zwischen 1 und 99):</label><br>
-                        <input type ="number"   id="age"    name="age"      min="1" max="99"    required><br><br>
+<!--                         <label for  ="age"> Alter (Zwischen 1 und 99):</label><br>
+                        <input type ="number"   id="age"    name="age"  min="1000" max="99"  required>*<br><br> -->
 
-                        <button onclick= "validateVorName(); validateNachName(); validateAge();" type="submit" form="form1" value="Submit">Validieren</button> 
+                        <button onclick= " return valGender();valVorName(); valNachName(); valEmail(); valPlz()" type="submit" form="form1" value="Submit">Validieren</button> 
                         <input type="Reset">
                     </fieldset>
                 </form>