From e135d8662ac4ae9364aef10b6566384fc6dc5153 Mon Sep 17 00:00:00 2001
From: spagb0l <wieduwiltm@icloud.com>
Date: Thu, 4 May 2023 20:07:28 +0200
Subject: [PATCH] =?UTF-8?q?bestellformular=20daten=C3=BCberpr=C3=BCfung=20?=
 =?UTF-8?q?verbessert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/bestellformular.html      |   5 +-
 public/css/desktop.css           | 989 ++++++++++++++++---------------
 public/javascript/formchecker.js |  30 +-
 3 files changed, 521 insertions(+), 503 deletions(-)

diff --git a/public/bestellformular.html b/public/bestellformular.html
index 9c50d1f..24b68f4 100644
--- a/public/bestellformular.html
+++ b/public/bestellformular.html
@@ -57,7 +57,7 @@
 
    
     <h1 id="begrueßung_bestellung_abschließen">Bestellung abschließen</h1>
-
+        <div id="fehlerbox">test</div>
         <form name="Bestellformular" >
             <table class="bestellung_tabelle">
                 <tr>
@@ -108,7 +108,6 @@
 
             </table>
 
-
         </form>
         <p id="tabellenbeschreibung">Die Felder mit einem * (Sternchen) sind Pflichtfelder.</p>
         <p id="gesamtkosten"><strong>Die Gesamtkosten (inkl. MwSt.)</br>belaufen sich auf: 5,30€</strong>
@@ -127,7 +126,7 @@
         
     
     <div class="button_abschließen_position">
-        <p><a class="button_abschließen" onclick="checkform()" href="bestellung_erfolgreich.html"  >Kostenpflichtig bestellen</a></p>
+        <p><a id="bestellbutton" class="button_abschließen" href="bestellung_erfolgreich.html"  >Kostenpflichtig bestellen</a></p>
 
     </div>
 
diff --git a/public/css/desktop.css b/public/css/desktop.css
index 3a60e08..42cc7c6 100644
--- a/public/css/desktop.css
+++ b/public/css/desktop.css
@@ -1,510 +1,517 @@
-    
-    /* DESKTOP Version T4Web 0.1 */
+/* DESKTOP Version T4Web 0.1 */
 
-    /* NONE FROM MOBILE */
+/* NONE FROM MOBILE */
 
-    .header_mobile {
-        display:none;
-    }
-    .header_mobilelogo {
-        display:none;
-    }
-    .navbar-mobile{
-        display:none;
-    }
+.header_mobile {
+    display: none;
+}
 
-    /* ALL-FORMAT */
+.header_mobilelogo {
+    display: none;
+}
 
-    * {
-        box-sizing: border-box;
-        font-family: Helvetica, Arial, sans-serif;
-    }
-    
-    #hinweis {
-        color: red;
-    }
+.navbar-mobile {
+    display: none;
+}
 
-    /* BACKGROUND-IMAGE-FORMAT-DESKTOP */
+/* ALL-FORMAT */
 
-    html body.index .content::before,
-    html body.datenschutz .content::before,
-    html body.ueberuns .content::before,
-    html body.kontakt .content::before,
-    html body.impressum .content::before {
-        content: "";
-        background-image: url('../pictures/gemuese_transparent.png');
-        background-repeat: no-repeat;
-        background-position: center top;
-        background-size: 470px;
-        position: absolute;
-        overflow: auto;
-        top: 20px;
-        right: 0px;
-        bottom: 0px;
-        left: 0px;
-        opacity: 0.2;
-        pointer-events: none;
-    }
+* {
+    box-sizing: border-box;
+    font-family: Helvetica, Arial, sans-serif;
+}
 
-    /* NAV-DESKTOP-FORMAT */
+#hinweis {
+    color: red;
+}
 
-    .navbar-desktop {
-        background-color: #476B1C;
-        display: grid;
-        grid-template-columns: repeat(var(--items), 1fr);
-        width: 100%;
-    }
-    
-    .navbar-desktop a {
-        text-align: center;
-        text-decoration: none;
-        color: white;
-        padding: 0.5em 0 0.5em 0;
-    }
+/* BACKGROUND-IMAGE-FORMAT-DESKTOP */
 
-    .navbar-desktop a:hover {
-        color: #f4eb49;
-    }
+html body.index .content::before,
+html body.datenschutz .content::before,
+html body.ueberuns .content::before,
+html body.kontakt .content::before,
+html body.impressum .content::before {
+    content: "";
+    background-image: url('../pictures/gemuese_transparent.png');
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: 470px;
+    position: absolute;
+    overflow: auto;
+    top: 20px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    opacity: 0.2;
+    pointer-events: none;
+}
 
-    /* BODY-FORMAT */
+/* NAV-DESKTOP-FORMAT */
 
-    body {
-        min-height: 100vh;
-        padding: 0;
-    }
-    
-    body::-webkit-scrollbar {
-        width: 10px
-    }
-    
-    body::-webkit-scrollbar-track {
-        background-color: white;
-    }
-    
-    body::-webkit-scrollbar-thumb {
-        background: #476B1C;
-    }
-    
-    /* HEADER-FORMAT */
+.navbar-desktop {
+    background-color: #476B1C;
+    display: grid;
+    grid-template-columns: repeat(var(--items), 1fr);
+    width: 100%;
+}
 
-    header {
-        background-color: #9BB558;
-    
-    }
-    
-    .header_desktop > h1 {
-        padding-top: 0.1em;
-        padding-left: 7em;
-        margin: 0;
-        font-size: 1.875em;
-    }
-    
-    .header_desktop > p {
-        padding-left: 17.6em;
-        margin-top: 0em;
-        margin-bottom: 0.5em;
-        font-size: 0.75em;
-    }
-    
-    .header_logo {
-        float: left;
-        margin-top: -18px;
-        margin-bottom: -20px;
-        margin-left: -20px;
-        transform: scale(0.8);
-    }
-    
-    /* CONTENT-FORMAT */
-    
-    .content {
-        position: relative;
-        color: black;
-    }
-    
-    .content p {
-        margin-top: 0.1em;
-        margin-bottom: 0.1em;
-    }
-    
-    .content :not(h1, strong, a) {
-        margin-left: 3.5em;
-        color: #606060;
-    }
-    
-    .content h1 {
-        text-align: center;
-        font-size: 1.875em;
-        font-weight: normal;
-        margin-top: 0;
-    }
-    
-    .content h2 {
-        font-size: 1em;
-        text-align: center;
-    }
-    
-    .content a {
-        margin-left: 0em;
-    }
-    
-    /* PRODUKTE-FORMAT */
+.navbar-desktop a {
+    text-align: center;
+    text-decoration: none;
+    color: white;
+    padding: 0.5em 0 0.5em 0;
+}
 
-    #aktuelle_auswahl {
-        margin-left: 2.7em;
-        margin-bottom: -0.5em;
-        font-size: 1em;
-    }
-    
-    
-    .beispiel_produkte img {
-        border: #606060 1px solid;
-        height: 160px;
-        width: 150px;
-        margin-top: 1em;
-        margin-left: 2em;
-    
-    }
-    
-    .button_produkte {
-        background-color: #476B1C;
-        color: #fff;
-        padding: 5px 20px;
-        border-radius: 15px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 1em;
-        cursor: pointer;
-        margin-left: -1em;
-    }
+.navbar-desktop a:hover {
+    color: #f4eb49;
+}
 
-    a:hover {
-        color:#f4eb49;
-    }
+/* BODY-FORMAT */
 
-    
-    /* FOOTER-FORMAT */
+body {
+    min-height: 100vh;
+    padding: 0;
+}
 
-    #balken {
-        background-color: #9BB558;
-        height: 20px;
-        position: relative;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-    }
-    
-    /* BESTELLUNG-FORMAT */
+body::-webkit-scrollbar {
+    width: 10px
+}
 
-    input {
-        font-family: Arial, Helvetica, sans-serif;
-        color: #606060
-    }
-    
-    
-    label {
-        font-weight: normal;
-        border: none;
-    }
-    
-    #anrede,
-    #titel,
-    #vorname,
-    #name,
-    #straße,
-    #hausnummer,
-    #plz,
-    #wohnort,
-    #email {
-        border: none;
-        width: 600px;
-    }
-    
-    .bestellung_tabelle {
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 0.8em;
-        color: #606060;
-        text-align: left;
-        margin-top: 30px;
-        margin-left: 50px;
-        border: thin solid #606060;
-        border-collapse: collapse;
-    }
-    
-    .bestellung_tabelle th {
-        border: thin solid #606060;
-    }
-    
-    .bestellung_tabelle td {
-        border: thin solid #606060;
-        width: 600px;
-    }
-    
-    .bestellung_tabelle tr {
-        height: 25px;
-    }
-    
-    .stern {
-        width: 30px;
-        text-align: center;
-    }
-    
-    .feld_vorn {
-        width: 115px;
-    }
-    
-    #tabellenbeschreibung {
-        font-size: 0.8em;
-        margin-top: 6px;
-        margin-left: 60px;
-    }
-    
-    #gesamtkosten {
-        font-size: 1em;
-        color: black;
-        margin-top: 40px;
-        margin-left: 50px;
-    }
-    
-    .checkboxen {
-        display: inline-block;
-        font-size: 0.8em;
-        text-align: justify;
-    }
-    
-    .checkbox_ausrichtung {
-        margin-left: 50px;
-    }
-    
-    #begrueßung_bestellung_abschließen {
-        font-size: 2em;
-        font-family: Arial, Helvetica, sans-serif;
-        color: black;
-        text-align: center;
-        margin-top: 0.5px;
-    }
-    
-    .button_abschließen {
-        background-color: #476B1C;
-        color: white;
-        padding: 3px 10px;
-        border-radius: 6px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 0.8em;
-        margin: 4px 2px;
-        cursor: pointer;
-        font-weight: normal;
-    }
-    
-    .button_abschließen_position {
-        margin-left: 100px;
-    }
-    
-    .produktueberschrift {
-        text-align: center;
-        margin: 50px;
-    }
-    
-    .parent {
-        display: flex;
-        justify-content: space-around;
-        flex-wrap: wrap;
-        align-content: center;
-    }
-    
-    .produkte {
-        display: flex;
-        border: #606060 3px solid;
-        display: inline-block;
-        margin: 25px;
-    }
-    
-    .produktbottom {
-        justify-content: space-between;
-        display: flex;
-        margin: 10px;
-    }
-    
-    .produktbottom a {
-        position: relative;
-    }
-    
-    .produkte_warenkorb {
-        position: relative;
-        max-width: 88%;
-        height: 165px;
-        border: thin solid #606060;
-        margin-top: 22.5px;
-        margin-bottom: 22.5px;
-        display: flex;
-        align-items: center;
-    }
-    
-    .produkte_warenkorb img {
-        margin-right: 0px;
-        height: 60%;
-    
-    }
-    
-    .content .produkte_details {
-        color: black;
-        font-weight: bold;
-        width: 150px;
-        display: block;
-        font-size: 0.8em;
-        margin-top: -40px;
-    }
-    
-    .button_mit_menue {
-        display: flex;
-        align-items: center;
-        position: absolute;
-        bottom: 50px;
-        right: 30px;
-    
-    }
-    
-    .button_entfernen {
-        background-color: #ebebeb;
-        border: thin solid black;
-        color: black;
-        width: 115px;
-        height: 31px;
-        padding: 6px;
-        border-radius: 3px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 0.8em;
-        margin: 4px 2px;
-        cursor: pointer;
-        font-weight: normal;
-    
-    }
-    
-    #menue {
-        width: 35px;
-        height: 25px;
-        margin-left: 10px;
-    }
-    
-    .content .gesamtbetrag {
-        font-weight: bold;
-        color: black;
-        position: absolute;
-        font-size: 1em;
-        bottom: 15px;
-        right: 15px;
-    }
-    
-    .gesamtbetrag {
-        position: absolute;
-        font-size: 1em;
-        bottom: 15px;
-        right: 15px;
-    }    
-    
-    .button_hinzufuegen {
-        background-color: #9BB558;
-        color: white;
-        padding: 10px;
-        border-radius: 50%;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 0.8em;
-        cursor: pointer;
-        width: 35px;
-        height: 35px;
-        position: relative;
-        box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
-        margin-top: 0.5em;
-    }
-    
-    .button_hinzufuegen::before {
-        content: "+";
-        position: absolute;
-        transform: translate(-50%, -40%);
-        font-size: 3em;
-        font-weight: normal;
-    }
-    
-    #notification {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        background-color: #4CAF50;
-        color: white;
-        text-align: center;
-        padding: 10px;
-        z-index: 999;
-    }
-    
-    .content .äußererContainer {
-        position: relative;
-        bottom: 0;
-        width: 400px;
-        padding-left: 50px;
-        margin-top: 22.5px;
-        margin-left: auto;
-        margin-bottom: 22.5px;
-        display: grid;
-        grid-template-rows: auto auto;
-    }
-    
-    .content .kostenContainer {
-    
-        position: relative;
-        width: 300px;
-        height: 60px;
-        font-weight: bold;
-        font-size: 0.9em;
-        display: inline-block;
-        margin-left: 0px;
-    }
-    
-    .content .lieferkosten_text {
-        color: black;
-        display: inline-block;
-        margin-left: 0px;
-        margin-right: 110px;
-        text-align: right;
-    }
-    
-    .content .lieferkosten_preis {
-        color: black;
-        display: inline-block;
-    }
+body::-webkit-scrollbar-track {
+    background-color: white;
+}
 
-    .content .gesamtkosten_text{
-        color: black;
-        display: inline-block;
-        text-align: left;
-        margin-left: 0;
-        margin-right: 63px;
-    }
+body::-webkit-scrollbar-thumb {
+    background: #476B1C;
+}
 
-    .content .gesamtpreis{
-        color: black;
-        display: inline-block;
-        margin-left: 0;
-    
-    }
-    
-    .content .button_bestellung_abschließen {
-        background-color: #476B1C;
-        color: white;
-        padding: 3px 10px;
-        border-radius: 6px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 0.8em;
-        margin: 4px 2px;
-        cursor: pointer;
-        font-weight: normal;
-    }
+/* HEADER-FORMAT */
+
+header {
+    background-color: #9BB558;
+
+}
+
+.header_desktop>h1 {
+    padding-top: 0.1em;
+    padding-left: 7em;
+    margin: 0;
+    font-size: 1.875em;
+}
+
+.header_desktop>p {
+    padding-left: 17.6em;
+    margin-top: 0em;
+    margin-bottom: 0.5em;
+    font-size: 0.75em;
+}
+
+.header_logo {
+    float: left;
+    margin-top: -18px;
+    margin-bottom: -20px;
+    margin-left: -20px;
+    transform: scale(0.8);
+}
+
+/* CONTENT-FORMAT */
+
+.content {
+    position: relative;
+    color: black;
+}
+
+.content p {
+    margin-top: 0.1em;
+    margin-bottom: 0.1em;
+}
+
+.content :not(h1, strong, a) {
+    margin-left: 3.5em;
+    color: #606060;
+}
+
+.content h1 {
+    text-align: center;
+    font-size: 1.875em;
+    font-weight: normal;
+    margin-top: 0;
+}
+
+.content h2 {
+    font-size: 1em;
+    text-align: center;
+}
+
+.content a {
+    margin-left: 0em;
+}
+
+/* PRODUKTE-FORMAT */
+
+#aktuelle_auswahl {
+    margin-left: 2.7em;
+    margin-bottom: -0.5em;
+    font-size: 1em;
+}
+
+
+.beispiel_produkte img {
+    border: #606060 1px solid;
+    height: 160px;
+    width: 150px;
+    margin-top: 1em;
+    margin-left: 2em;
+
+}
+
+.button_produkte {
+    background-color: #476B1C;
+    color: #fff;
+    padding: 5px 20px;
+    border-radius: 15px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1em;
+    cursor: pointer;
+    margin-left: -1em;
+}
+
+a:hover {
+    color: #f4eb49;
+}
+
+
+/* FOOTER-FORMAT */
+
+#balken {
+    background-color: #9BB558;
+    height: 20px;
+    position: relative;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+/* BESTELLUNG-FORMAT */
+
+input {
+    font-family: Arial, Helvetica, sans-serif;
+    color: #606060
+}
+
+
+label {
+    font-weight: normal;
+    border: none;
+}
+
+#anrede,
+#titel,
+#vorname,
+#name,
+#straße,
+#hausnummer,
+#plz,
+#wohnort,
+#email {
+    border: none;
+    width: 600px;
+}
+
+.bestellung_tabelle {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 0.8em;
+    color: #606060;
+    text-align: left;
+    margin-top: 30px;
+    margin-left: 50px;
+    border: thin solid #606060;
+    border-collapse: collapse;
+}
+
+.bestellung_tabelle th {
+    border: thin solid #606060;
+}
+
+.bestellung_tabelle td {
+    border: thin solid #606060;
+    width: 600px;
+}
+
+.bestellung_tabelle tr {
+    height: 25px;
+}
+
+.stern {
+    width: 30px;
+    text-align: center;
+}
+
+.feld_vorn {
+    width: 115px;
+}
+
+#tabellenbeschreibung {
+    font-size: 0.8em;
+    margin-top: 6px;
+    margin-left: 60px;
+}
+
+#gesamtkosten {
+    font-size: 1em;
+    color: black;
+    margin-top: 40px;
+    margin-left: 50px;
+}
+
+.checkboxen {
+    display: inline-block;
+    font-size: 0.8em;
+    text-align: justify;
+}
+
+.checkbox_ausrichtung {
+    margin-left: 50px;
+}
+
+#begrueßung_bestellung_abschließen {
+    font-size: 2em;
+    font-family: Arial, Helvetica, sans-serif;
+    color: black;
+    text-align: center;
+    margin-top: 0.5px;
+}
+
+.button_abschließen {
+    background-color: #476B1C;
+    color: white;
+    padding: 3px 10px;
+    border-radius: 6px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.8em;
+    margin: 4px 2px;
+    cursor: pointer;
+    font-weight: normal;
+}
+
+.button_abschließen_position {
+    margin-left: 100px;
+}
+
+.produktueberschrift {
+    text-align: center;
+    margin: 50px;
+}
+
+.parent {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+.produkte {
+    display: flex;
+    border: #606060 3px solid;
+    display: inline-block;
+    margin: 25px;
+}
+
+.produktbottom {
+    justify-content: space-between;
+    display: flex;
+    margin: 10px;
+}
+
+.produktbottom a {
+    position: relative;
+}
+
+.produkte_warenkorb {
+    position: relative;
+    max-width: 88%;
+    height: 165px;
+    border: thin solid #606060;
+    margin-top: 22.5px;
+    margin-bottom: 22.5px;
+    display: flex;
+    align-items: center;
+}
+
+.produkte_warenkorb img {
+    margin-right: 0px;
+    height: 60%;
+
+}
+
+.content .produkte_details {
+    color: black;
+    font-weight: bold;
+    width: 150px;
+    display: block;
+    font-size: 0.8em;
+    margin-top: -40px;
+}
+
+.button_mit_menue {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    bottom: 50px;
+    right: 30px;
+
+}
+
+.button_entfernen {
+    background-color: #ebebeb;
+    border: thin solid black;
+    color: black;
+    width: 115px;
+    height: 31px;
+    padding: 6px;
+    border-radius: 3px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.8em;
+    margin: 4px 2px;
+    cursor: pointer;
+    font-weight: normal;
+
+}
+
+#menue {
+    width: 35px;
+    height: 25px;
+    margin-left: 10px;
+}
+
+.content .gesamtbetrag {
+    font-weight: bold;
+    color: black;
+    position: absolute;
+    font-size: 1em;
+    bottom: 15px;
+    right: 15px;
+}
+
+.gesamtbetrag {
+    position: absolute;
+    font-size: 1em;
+    bottom: 15px;
+    right: 15px;
+}
+
+.button_hinzufuegen {
+    background-color: #9BB558;
+    color: white;
+    padding: 10px;
+    border-radius: 50%;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.8em;
+    cursor: pointer;
+    width: 35px;
+    height: 35px;
+    position: relative;
+    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
+    margin-top: 0.5em;
+}
+
+.button_hinzufuegen::before {
+    content: "+";
+    position: absolute;
+    transform: translate(-50%, -40%);
+    font-size: 3em;
+    font-weight: normal;
+}
+
+#notification {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #4CAF50;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    z-index: 999;
+}
+
+.content .äußererContainer {
+    position: relative;
+    bottom: 0;
+    width: 400px;
+    padding-left: 50px;
+    margin-top: 22.5px;
+    margin-left: auto;
+    margin-bottom: 22.5px;
+    display: grid;
+    grid-template-rows: auto auto;
+}
+
+.content .kostenContainer {
+
+    position: relative;
+    width: 300px;
+    height: 60px;
+    font-weight: bold;
+    font-size: 0.9em;
+    display: inline-block;
+    margin-left: 0px;
+}
+
+.content .lieferkosten_text {
+    color: black;
+    display: inline-block;
+    margin-left: 0px;
+    margin-right: 110px;
+    text-align: right;
+}
+
+.content .lieferkosten_preis {
+    color: black;
+    display: inline-block;
+}
+
+.content .gesamtkosten_text {
+    color: black;
+    display: inline-block;
+    text-align: left;
+    margin-left: 0;
+    margin-right: 63px;
+}
+
+.content .gesamtpreis {
+    color: black;
+    display: inline-block;
+    margin-left: 0;
+
+}
+
+.content .button_bestellung_abschließen {
+    background-color: #476B1C;
+    color: white;
+    padding: 3px 10px;
+    border-radius: 6px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.8em;
+    margin: 4px 2px;
+    cursor: pointer;
+    font-weight: normal;
+}
+
+#fehlerbox {
+    text-align: center;
+    display: none;
+    color: red;
+}
\ No newline at end of file
diff --git a/public/javascript/formchecker.js b/public/javascript/formchecker.js
index 6cfaecf..93abcff 100644
--- a/public/javascript/formchecker.js
+++ b/public/javascript/formchecker.js
@@ -3,7 +3,7 @@ let x = Number(localStorage.getItem("gesamtpreis")).toFixed(2);
 let y = document.getElementById("gesamtkosten");
 y.innerHTML = "Die Gesamtkosten (inkl. MwSt.) belaufen sich auf: " + x + "€";
 
-function checkform() {
+function checkform(event) {
     let vorname = document.getElementById('vorname').value;
     let name = document.getElementById('name').value;
     let straße = document.getElementById('straße').value;
@@ -12,11 +12,23 @@ function checkform() {
     let wohnort = document.getElementById('wohnort').value;
     let email = document.getElementById('email').value;
 
-    if (/[a-zA-Z]{2,}/.test(vorname) === false) alert('vorname falsch');
-    if (/[a-zA-Z]{2,}/.test(name) === false) alert('name falsch');
-    if (/[a-zA-Z]{2,}/.test(straße) === false) alert('straße falsch');
-    if (/[0-9]{1,}/.test(hausnummer) === false) alert('hausnummer falsch');
-    if (/[0-9]{4,5}/.test(plz) === false) alert('plz falsch');
-    if (/[a-zA-Z]{2,}/.test(wohnort) === false) alert('wohnort falsch');
-    if (/^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) alert('email falsch');
-}
\ No newline at end of file
+    fehlerbox.innerHTML = 'Fehler: <br>';
+
+    if (/[a-zA-Z]{2,}/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
+    if (/[a-zA-Z]{2,}/.test(name) === false) fehlerbox.innerHTML +=  'Name: mindestens zwei Buchstaben <br>';
+    if (/[a-zA-Z0-9]{2,}/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
+    if (/[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <br>';
+    if (/[0-9]{4,5}/.test(plz) === false) fehlerbox.innerHTML += 'Postleitzahl: mindestens vier Zahlen <br>';
+    if (/[a-zA-Z]{2,}/.test(wohnort) === false) fehlerbox.innerHTML += 'Wohnort: mindestens zwei Buchstaben <br>';
+    if (/^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) fehlerbox.innerHTML += 'EMail: bitte nach dem Muster "email@beispiel.de" <br>';
+
+    if(fehlerbox.innerHTML.length > 12) {
+        event.preventDefault();
+        let fehlerboxstyle = document.getElementById('fehlerbox');
+        fehlerbox.style = 'display: block;'
+    }
+}
+
+const fehlerbox = document.getElementById('fehlerbox');
+const bestellbutton = document.getElementById('bestellbutton');
+bestellbutton.addEventListener('click', checkform, false);
\ No newline at end of file