Button nur anzeigen wenn Eingabe richtig ist

[Rolf B]

Hallo Shanaya,

ich nehme an, dass Du den submit-Button für das form meinst. Der ist im Beispiel nicht gezeigt. Denken wir uns also ein

<button type="submit">Absenden</button>

hinzu.

Problem: Mit der ENTER Taste kannst Du ein form auch ohne Button abschicken. Du musst also auf jeden Fall das submit-Event des Formulars behandeln, um bei leerer Stadt den Submit zu verhindern.

Und am Server auch prüfen, weil böse Benutzer Dir auch ohne <form> irgendwelchen Müll hineinPOSTen können.

Du möchtest also die PLZ eingeben lassen und die Stadt automatisch zusteuern. In der Praxis wird das vermutlich ein fetch-Aufruf an deinen Server sein. Du möchtest bestimmt keine Tabelle mit bis zu 10000 Einträgen im JavaScript-Code haben.

Du solltest das aber nur tun, wenn die Eingabe vierstellig ist. Für weniger Stellen weißt Du ja von vornherein, dass Du nichts finden wirst. Und Du solltest das readonly-Element für die Stadt nicht für Meldungen zweckentfremden. Steuere das lieber über CSS und das Validation API. Die Pseudoklassen :valid und :invalid helfen Dir dabei.

Guck hier: https://jsfiddle.net/Rolf_b/h0q9f34g/

Ich habe jede Label/Input Gruppe in ein div gelegt, deswegen ist die Verknüpfung von plz:valid mit dem Button etwas schwieriger. Der Selektor #adresse:has(#plz:valid) #buttons button schaut über :has() zuerst, ob das Form (id="adresse") ein Kindelement mit id="plz" enthält, das die Validierung bestanden hat, und sucht dann nach einem Kindelement mit id="buttons" und darin ein button-Element.

Das #buttons div habe ich vor allem deshalb eingebaut, um Button und Warntext ungefähr auf gleicher Höhe zu haben…

Rolf