Problem bei einem Formular auf dem Smartphone

[Rolf B]

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.

<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 die Validierung so zu nutzen, wie sie gedacht ist. In Browsern, in denen sie implementiert ist, wird das Absenden unterbunden, wenn die Validierungsregeln an den Eingabefeldern nicht erfüllt sind, und der Browser weist auf das Problem hin. Dafür brauchst Du keine einzige Zeile eigenen JavaScripts.

DAS brauchst Du höchstens, 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. Und eine serverseitige Validierung der Eingabe brauchst Du ohnehin noch. Clients sind böse. Vor ihnen sitzen böse Menschen. Ihr einziges Ziel ist es, deine Vorschriften so ekelig wie möglich zu missachten. Mit dieser Haltung musst Du an die Eingabeüberprüfung herangehen, oder Du kannst sie gleich bleiben lassen.

Eine Redirection URL als hidden input ist ebenfalls keine gute Idee. Der Wert eines hidden input kann vom Benutzer mit Hilfe der Entwicklerwerkzeuge manipuliert werden. Diesen Wert solltest Du in der $_SESSION speichern. Wenn das nicht geht, musst Du den Viewstate (=die im hidden input gespeicherten Daten) kryptographisch sicher signieren oder verschlüsseln. Die Betonung liegt auf kryptographisch sicher. Eine base64-Codierung oder ein md5 Hash sind nicht sicher.

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