HTML JS Input Feld leer?
Hallo!
Ich arbeite gerade an einem Projekt für die Schule.
Es muss eine Fehlermeldung kommen wenn ein Feld noch nicht ausgefüllt ist. Wie definiere ich das?
if (x == ??)
2 Antworten
Ich vermute mal, es soll ein Eingabefeld in einem <form> validiert werden. Das funktioniert so:
Javascriptconst form = document.getElementById("my-form");
const field = document.getElementById("my-field");
form.addEventListener("submit", ev => {
if (field.value.trim() === "") {
ev.preventDefault();
alert("Feld darf nicht leer sein!");
}
});
<form id="my-form" action="http://www.example.com">
<input id="my-field" type="text" name="hi">
<input type="submit" value="Absenden!">
</form>
Im Script wird ein Event Listener zum Formular hinzugefügt. Dieses löst ein Event aus, wenn es abgesendet wird. Dabei überprüfen wir, ob das Feld mit der ID "my-field" leer ist. Falls ja, wird das Event mit ev.preventDefault() abgebrochen, d.h. das Formular wird nicht abgesendet, und eine Fehlermeldung wird mit alert() ausgegeben.
Beachte, dass durch field.value.trim() das Eingabefeld auch dann als leer zählt, wenn es Leerzeichen enthält (Die Methode trim() entfernt Leerzeichen am Anfang und am Ende eines Strings).
PS: Eine noch einfachere Methode geht so:
<input type="text" name="hi" required>
Durch das required verhindert der Browser, dass das Formular abgesendet wird, falls der Input leer ist. Es wird aber abgesendet, wenn es Leerzeichen enthält.
Bisschen schwammig, aber Du könntest es so machen:
HTML:
<input type="text" id="id">
JS
if (document.getElementById('id').value == '') {
...
}