Aufgabe auf ../../events-window-object.html
Hier sind die Events, die individuelle Eingaben abfangen:
- submit fängt das Absenden des Formulars ab.
- blur fängt die Eingabe bei input type="text" ab.
- change fängt eine Änderung in select-Listen ab und erkennt das Ändern in textarea.
- click fängt das Ändern bei input type="radio" und type="checkbox" ab (onchange funktioniert heute auch zuverlässig bei Checkboxen).
<form id="myform" action="anfrage.php" method="post"> <input placeholder="Name" id="reqname" type="text" name="reqname" value=""> <input placeholder="E-Mail" id="reqemail" type="email" name="reqemail" value=""> <input placeholder="Telefon" id="reqphone" type="tel" name="reqphone" value=""> <textarea id="reqtext" name="reqtext">Ihr Anliegen</textarea> <div class="emsg"></div> <input class="btn" type="submit" value="Senden"> </form>
const form = document.querySelector("#myform"); form.addEventListener("submit", function (evt) { evt.preventDefault(); const reqname = document.querySelector("#reqname").value; document.querySelector(".emsg").innerText = ""; // Name testen let result = /^([ \u00c0-\u01ffa-zA-Z\.' \-]{3,})+$/.test(reqname); if (!result) { document.querySelector(".emsg").innerText = "Der Name muss mindestens drei Zeichen lang sein."; } // E-Mail testen const reqemail = document.querySelector("#reqemail").value; result = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(reqemail); if (!result) { document.querySelector(".emsg").innerText += "\nBitte prüfen Sie die E-Mail-Adresse!"; } // Telefonnummer testen const reqphone = document.querySelector("#reqphone").value; result = /^([0-9\.-\/ ()]{7,})$/.test(reqphone); if (!result) { document.querySelector(".emsg").innerText += "\nBitte prüfen Sie die Telefonnummer!"; } // Text prüfen const text = document.querySelector("#reqtext").value; result = /^([ \u00c0-\u01ffa-zA-Z\.' \-]{30,})+$/.test(text); if (!result) { document.querySelector (".emsg").innerText += "\nBitte erklären Sie Ihr Anliegen" + "mit ein oder zwei Sätzen."; } // Wenn alle Werte als korrekt erkannt werden if (result) { form.submit(); // Formularinformationen absenden } });