Mit JavaScript ein Formular Eingabefeld nach bestimmten Zeichen untersuchen und bei Treffer das absenden verhindern?
Guten Abend,
ich suche jetzt seit 3 Tagen nach der Lösung der obengenannten Aufgabenstellung.
Ich möchte das JavaScript wenn die Zeichen <>{} im Eingabefeld eines Formulars eingegeben wurden, das absenden des Formulars unterbindet, also die Standardaktion des Browsers quasi verhindert.
Ich weis das es auch von Serverseite mit PHP geprüft werden muss, das habe ich soweit schon rausgefunden nur bin ich bei JavaScript nicht schlauer geworden.
Auf eine Antwort mit der Lösung anhand eines Beispielcodes wäre ich sehr erfreut.
Danke :)
2 Antworten
a) Verwende das pattern-Attribut.
b) Hänge dich mit einen Listener an das submit-Event. Hole dir die Formulardaten und prüfe sie dann innerhalb einer Schleife.
document.getElementById("my-formular").addEventListener("submit", evt => {
const formData = new FormData(evt.currentTarget);
const BreakException = {};
try {
formData.forEach((value, key) => {
if (/[<>\{\}]/.test(value)) {
evt.preventDefault();
throw BreakException;
}
});
}
catch (ex) {
if (ex !== BreakException) {
throw ex;
}
}
});
Sollte eines der Zeichen in einem der Eingabefelder enthalten sein, wird die Standardaktion (das Verschicken des Formulars) verhindert.
Das ist in diesem Fall auch nur dazu da, um frühzeitig aus forEach ausbrechen zu können (wenn bspw. das erste Feld invalid ist, braucht man ja nicht noch die anderen Felder prüfen). Es wird absichtlich eine Exception mit einem leeren Objekt geworfen und via try-catch wieder aufgefangen.
Alternativ könnte man auch eine for..of-Schleife verwenden. Wie ich gerade sehe, wäre das auch kürzer und besser. Das RegExp-Objekt könnte zudem schon vor der Schleife definiert werden.
const formData = new FormData(evt.currentTarget);
const regex = new RegExp("[<>\{\}]");
for (const pair of formData.entries()) {
if (regex.test(pair[1])) {
evt.preventDefault();
break;
}
}
<html>
<head>
<script>
function checkdata() {
let mychecks = document.getElementById("biologie").value;
let anzahlchecks = /[\<\>\{\}]+/;
if(anzahlchecks.test(mychecks) == false ) {
return true;
}
alert("Diese Zeichen sind nicht erlaubt : < > { }");
return false;
}
</script>
</head>
<body>
<form action="#sent" id="myform" method="post" onsubmit="return checkdata();" >
<input type="text" id="biologie" name="frei" value="Biol>ogie" >
<button type="submit" name=".submit">submit</button>
</form>
</body>
</html>
hieraus erkenn ich schon mal die Prüfung der Zeichen nur wird der Browser noch nicht an seiner automatischen Weiterleitung gehindert, nach meine jetzigem Wissen sollte das mit evt.preventDefault(); geschehen.
ansonsten hast du mir schon sehr mit der Prüfung der Zeichen geholfen da hat es bei mir gehakt
In dem obigen Code wird der Standard-Handler durch den Rückgabewert false verhindert. Das heißt, du hast die selbe Funktionalität, als würdest du preventDefault aufrufen. Das funktioniert aber auch nur bei Definition eines Handler-Attributs (onsubmit, onclick, u.ä. - ausgenommen onmouseover).
vielen Dank ich werde es gleich ausprobieren.
try...catch war mit bisher noch nicht bekannt