bestellformular datenüberprüfung verbessert

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>
 

public/css/desktop.css

@@ -1,4 +1,3 @@
-    
 /* DESKTOP Version T4Web 0.1 */
 
 /* NONE FROM MOBILE */
@@ -6,9 +5,11 @@
 .header_mobile {
     display: none;
 }
+
 .header_mobilelogo {
     display: none;
 }
+
 .navbar-mobile {
     display: none;
 }
@@ -508,3 +509,9 @@
     cursor: pointer;
     font-weight: normal;
 }
+
+#fehlerbox {
+    text-align: center;
+    display: none;
+    color: red;
+}

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');
+    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);