Ich würde gerne einen HTML-Vorgang stoppen, wenn eine Voraussetzung in Java Skript nicht erfüllt ist:
Ich arbeite mit formsubmit.co und kann auf meiner Webseite nicht mit PHP arbeiten. Bis jetzt habe folgenden Code:
<form action="https://formsubmit.co/email@gutefrage.de" method="post" onsubmit="validateEmail()">
<input type="hidden" name="_autoresponse" value=
"Hallo, du hast diese Email bekommen. " />
<input type="hidden" name="_next" value="https://www.gutefrage.net/" />
<input type="email" id="email" name="email" placeholder="Email Address" />
<label class="container"><input type="checkbox" required/>Ich habe die Nutzungsbedinungen gelesen.</label>
<button type="submit">Send</button>
</form>
<script>
/* <![CDATA[ */
function validateEmail() {
const email = document.getElementById("email").value;
if (email.includes("200") && email.includes("Frage") && email.length >= 20) {
alert("Valid email address.");
return true;
} else {
alert("Invalid email address.");
return false;
}
}
/*]]>*/
</script>
Das Skript überprüft die Eingabe der E-Mail Adresse, sofern alle Felder eingegeben sind und das Formular abgesendet wurde, ob die eingegebene E-Mail-Adresse "100", "Frage" und grösser oder gleich 20 Zeichen lang ist. Auf einer Nachricht im Browser wird angezeigt, ob die E-Mail-Adresse den Voraussetzungen entspricht oder nicht. Anschließend wird die Nachricht "Hallo, du hast diese E-Mail bekommen." an die eingegebene E-Mail-Adresse gesendet (das übernimmt formsubmit.co). Anschließend wird der Nutzer auf Gute Frage weitergeleitet.
Beides Funktioniert einwandfrei, jedoch wird, egal ob die E-Mail die Voraussetzungen erfüllt oder nicht, an die angegebene E-Mail gesendet.
Meine Frage ist, ob ich die Aktion in HTML irgendwie stoppen kann, also das die E-Mail nicht versendet wird, wenn sie die Voraussetzungen in JavaScript nicht erfüllt. Dabei kann ich keine riesigen Änderungen am gegebenen HTML-Code von formsubmit unternehmen (da dies ja immer noch funktionieren sollte) und ohne PHP oder ähnliches.
Edit: Das mit der Erkennung funktioniert irgendwie auch nicht, es zeigt immer an, dass die Email die Voraussetzungen nicht erfüllt. Ich habe jedoch ein Beispiel, wo dies funktioniert:
<form onsubmit="return validateEmail()" method="post">
<label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="z.B. ichbincool@email.com" size="40" required="" /> <input type="submit" value="senden" required="" />
</form>
<script>
/* <![CDATA[ */
function validateEmail() {
const email = document.getElementById("email").value;
if (email.includes("ich") && email.includes("cool") && email.length >= 5) {
alert("Valid email address.");
return true;
} else {
alert("Invalid email address.");
return false;
}
}
/*]]>*/
</script>
bei weniger Datenvolumen bzw. Netzanbindung, oder gedrosseltem Netz, lädt die Webseite mit .webp schneller als mit komprimierten .jpg Grafiken, so meine Annahme