Problem bei einem Formular auf dem Smartphone
bearbeitet von
Hallo RalphT,
das erste Eingabefeld hat mich zunächt verwirrt, aber ich nehme an, das dient nur zur Visualisierung des generierten Firewall-Logins.
Ein Problem ist, dass placeholder keine Labels sind. Ein input-Element braucht eine Beschriftung, unbedingt. Du bindest ein Label an ein input-Element, indem Du entweder am Label mit dem for-Attribut auf die ID des input-Element verweist, oder indem Du das input-Element als Kind ins Label setzt. Letzteres ist einfacher.
~~~html
<label>Vorname<br>
<input name="userFirstName" type="text" ...>
</label>
~~~
Das Problem deines Buttons ist die Validierung. Die findet nur statt, wenn ein input-Feld das change-Event feuert, und **das** feuert nur, wenn das Feld verlassen wird.
Gibst Du eine Mailadresse ein und verlässt das Feld noch nicht, fand die letzte Validierung zu einem Zeitpunkt statt, wo die Mail noch leer war - und der Button ist inaktiv. Du kannst ihn weder klicken noch mit Tab anspringen.
Die sinnvollste Lösung ist meiner Auffassung nach, den Absenden-Button **nicht** auszugrauen, sondern sich die Validierung zu nutzen. In Browsern, in denen sie funktioniert, wird das Absenden ohnehin unterbunden, wenn die Validierungsregeln an den Eingabefeldern nicht funktionieren. Dafür brauchst Du kein eigenes JavaScript.
DAS brauchst Du nur, um einen Fallback zu haben für Browser, die das Validierungs-API nicht unterstützen. Da aber selbst der IE10 das schon konnte, sehe ich dafür heute keinen Bedarf mehr.
Wenn Du Dich in die Idee verliebt hast, dass ein unvollständig ausgefülltes Formular unbedingt einen ausgegrauten Absenden-Button braucht, musst Du nicht auf das change-Event, sondern auf das input-Event reagieren. Der Unterschied ist, dass change nur feuert, wenn das Eingabefeld verlassen wird. input feuert nach jedem Tastendruck.
_Rolf_
--
sumpsi - posui - obstruxi