Problem bei einem Formular auf dem Smartphone

[RalphT]

Moin,

ich habe ein Formular in eine Seite integriert.

Dort muss man 3 Felder ausfüllen. Wenn ich mit dem Smartphone (Android) dieses Formular ausfülle und nach dem Ausfüllen des letzten Feldes den Button "Absenden" drücke, dann reagiert der Button nicht. Drücke ich mit dem Finger irgendwo außerhalb des Feldes, sodass der Focus außerhalb der letzten Zeile ist und dann den Button touche, dann funktioniert es. Oder eine weitere Möglichkeit ist, dass ich auf der eingeblendeten Tastatur die Taste "öffnen" drücke. Dann werden die Daten auch abgesendet.

Auf einem Rechner mit den Browsern, IE, Firefox, Chrome und Edge funktioniert das einwandfrei.

Leider habe ich jetzt überhaupt keine Idee, wo ich jetzt ansetzen kann.

[Auge]

Hallo

ich habe ein Formular in eine Seite integriert.

Dort muss man 3 Felder ausfüllen. Wenn ich mit dem Smartphone (Android) dieses Formular ausfülle und nach dem Ausfüllen des letzten Feldes den Button "Absenden" drücke, dann reagiert der Button nicht. Drücke ich mit dem Finger irgendwo außerhalb des Feldes, sodass der Focus außerhalb der letzten Zeile ist und dann den Button touche, dann funktioniert es. Oder eine weitere Möglichkeit ist, dass ich auf der eingeblendeten Tastatur die Taste "öffnen" drücke. Dann werden die Daten auch abgesendet.

Auf einem Rechner mit den Browsern, IE, Firefox, Chrome und Edge funktioniert das einwandfrei.

Heißt, dass das Formular grundsätzlich funktioniert.

Was da genau nicht funktioniert, lässt sich ohne den realen Code nicht nachvollziehen. Ein Link auf die fragliche Seite wäre ungemein hilfreich.

Deine Beschreibung riecht aber streng danach, dass in der Mobilansicht ein transparentes Element den Absendebutton überlagert. Hast du da irgendetwas mit position: relative; oder position: absolute; positioniert oder gar mit einem z-index versehen?

Tschö, Auge

[Raketenglaskugelputzer]

Deine Beschreibung ist das eine, aber um die Ursache Deines Problems ergründen zu können benötigen wir entweder eine extrem gut polierte Glaskugel in der Größe eines ganzen Sonnensystems oder Deine Mithilfe.

Damit wir uns das ansehen können gibt es über dem Feld für den Text das Eingabefeld für die „problematische Seite“:

Das funktioniert auch beim Antworten…

[RalphT]

Hallo,

ja das mit der Glaskugel ist immer so eine Sache. Ja du hast Recht, ohne Quelltext wirds schwierig. Das ging aber zuerst nicht anders, da ich erst dieses Formular anonymisieren musste. Ich habe inzwischen auch schon die Ursache gefunden. Leider habe ich aber noch keine Lösung.

Erst einmal eine Erklärung, wozu das ist: Diese Seite läuft auf einer Firewall. Daher kann ich hier auch nicht mit einem Link dienen. Ich möchte, dass sich die User an dieser Firewall registrieren können/sollen. Und hier ist ein Problem, die die Firewall hat: Diese akzeptiert nur eine Variable, also entweder Vorname, Nachname oder E-Mail. Ich hätte aber alle 3 Informationen. Daher wurde von einem anderen Kollegen ein Script dazu erstellt. Dieses Script stellt mir die 3 Felder (Vorname, Nachname, E-Mail) in einer Variable zusammen. Diese Variable wird dann mit dem Button "Absenden" der Firewall übermittelt. Soweit alles gut. Funktioniert auch, aber leider nur in bestimmten Situationen. Wenn man zuerst seinen Vornamen eintippt, dann geht der Nutzer mit der Maus oder mit dem Finger in das nächste Feld. Dort gibt man seinen Nachnamen ein. Dann weiter zum dritten Feld der E-Mailadresse. So und wenn man den letzten Buchstaben von der E-Mailadresse eingetippt hat, dann geht es nicht weiter, weil der Button noch ausgegraut ist. Das ist auch richtig so. Wenn man sich die erste Zeile betrachtet, hat der er den Wert der E-Mailadresse noch nicht in dieses Feld geschrieben. Somit fehlt anscheinend noch die E-Mailadresse. Klickt man mit der Maus auf eine weiße Fläche, dann wird dieser Wert auch in der obere Feld übernommen. Dann gehts auch weiter mit dem Absenden.

Und hier liegt das Problem. Der Nutzer tippt seine E-Mailadresse ein und kann den Absendebutton nicht drücken, weil der noch deaktiviert ist.

Den ganzem Kram mit CSS habe ich hier weggelassen. Aber ich denke mit dem abgespeckten Quelltext kann man das hoffentlich nachvollziehen.

Ok, jetzt könnte ihr ja schreiben, dann frage doch den der das Script erstellt hat. Ja stimmt, würde ich auch. Nur der ist erst mal länger nicht da.

Hier der Quelltext

<!DOCTYPE html>
<html>
<head>
<title>Registrierung</title>

<script>

    document.addEventListener('DOMContentLoaded', function(ev){
        Variablen = {
            input1 : document.querySelector('[name="userFirstName"]'),
            input2 : document.querySelector('[name="userName"]'),
            input3 : document.querySelector('[name="userMail"]'),
            output1 : document.querySelector('[name="auth_user"]'),
            button : document.querySelector('[name="accept"]')
        };

        Variablen.input1.addEventListener("change", handleChangedInput);
        Variablen.input2.addEventListener("change", handleChangedInput);
        Variablen.input3.addEventListener("change", handleChangedInput);

        Variablen.button.addEventListener('click', handleSubmit);

    });

    var handleChangedInput = function(ev){
        ev.target.value = ev.target.value.trim();

        Variablen.output1.value = [Variablen.input1.value,Variablen.input2.value,Variablen.input3.value].join('#');

        if (Variablen.input1.validity.valid && Variablen.input2.validity.valid && Variablen.input3.validity.valid){
           Variablen.button.disabled =false;
        } else {
           Variablen.button.disabled =true;
        }

    };

</script>

</head>

<body>

   Bitte hier registrieren:
   <form name="register" method="post" action="$PORTAL_ACTION$"><br/>
    <input name="auth_user" value="" size="30" type="text"/><p>
    <input name="userFirstName" required pattern="^[a-zA-Z]+" placeholder="Vorname" size="18" type="text"/><p>
    <input name="userName" required pattern="^[a-zA-Z]+" placeholder="Nachname" size="18" type="text"/><p>
    <input name="userMail" required placeholder="E-Mailadresse" size="18" type="email"/><p>
    <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$"/>
    <input name="accept" type="submit" value="Absenden"/>
   </form>

</body>
</html>Quelltext hier

Und hier der Screenshot der Anwendung:

[Der Martin]

Mahlzeit,

Diese Seite läuft auf einer Firewall.

ich weiß nicht, ob ich verstehe, wo "auf einer Firewall" ist; vermutlich eher nicht. Aber das scheint auch nebensächlich zu sein.

Deine lange Beschreibung zeigt zusammen mit dem Code-Auszug, dass du ein Problem mit dem Konzept der Eingabe hast, dessen Ursache in Javascript liegt. Das changed-Event eines Eingabefeldes wird nämlich erst ausgelöst, wenn das Feld den Focus verliert.

Allerdings funktioniert es dann auf anderen Browsern/Plattformen auch nicht, bzw. nur eingeschränkt. Mit einer herkömmlichen Maus kann ich den Absende-Button anklicken, auch wenn er deaktiviert ist. Dadurch verliert das Eingabefeld den Focus, handleChangedInput() wird aufgerufen, schaltet den Button frei und der Klick ist doch noch wirksam.

Aber wenn ich das Formular "normal" absenden will, also durch Drücken der Enter-Taste nach dem Ausfüllen des dritten Feldes, bin ich angeschmiert.

Besser für alle Nutzer wäre daher, nicht das changed-Event zu verwenden, sondern beispielsweise das input-Event.

Live long and pros healthy,
 Martin

[JürgenB]

Hallo Ralph,

das change-Event feuert erst, wenn das Inputfeld den Focus verliert. Das input-Event feuert aber bei jeder Eingabe bzw. bei jedem Tastendruck. Du musst also bei der Eingabe prüfen,ob sie komplett ist, und "beim letzten Zeichen" den Submitbutton freischalten.

Gruß
Jürgen

[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

[RalphT]

Ich bin nach dem Verfassen des letzten Post nach Hause gefahren. Daher kann ich das jetzt nicht vor Ort testen. Ich versuche mal zwischenzeitlich ein paar Antworten zu kommentieren.

Mahlzeit,

Diese Seite läuft auf einer Firewall. ich weiß nicht, ob ich verstehe, wo "auf einer Firewall" ist; vermutlich eher nicht. Aber das scheint auch nebensächlich zu sein.

Das ist auch soweit nicht schlimm. Ich erkläre das aber gerne. Ich nutze diese Applikation:

https://www.pfsense.org/

Die habe ich auf einer VMware installiert. Was kann man damit machen? Ihr kennt das vielleicht aus den Hotels. Wenn man sich dort mit dem WLAN verbinden möchte, dann ist in der Regel das WLAN-Netz nicht mehr mit einem WPA-Key geschützt. Man kann sich also sofort damit verbinden. Wenn man das macht, dann erscheint eine Startseite vom Hotel. Meistens muss man dann nur die Bedingungen akzeptieren und man ist dann drin. Weiter gibt es Optionen, dass man mit Vouchercodes dort arbeitet. Und das kann man damit machen. Und diese Startseite ist hier in diesem Fall meine Seite. Da die pfsense beim Login nur Name und Passwort akzptiert, brauchte ich 2 weitere Variablen. das Ganze soll so funktionieren, sobald sich hier einer mit dem WLAN verbindet, erscheint diese Seite. Dort muss er seinen Namen und die Mailadresse eingeben. Wenn der Nutzer das gemacht hat, dann sehe ich in der Firewall nach und trage dieses Endgerät mit der MAC-Adresse dort ein. Ab dann kann der Nutzer mit diesem Endgerät im WLAN surfen, ohne dass er wieder etwas eingeben muss.

So nun zu den Lösungen von euch: Der letzte Satz von Rolf B leuchtete mir sehr ein. Ich habe hier mal eben lokal am Recher den Wert von "change" auf "input" verstellt. Das sieht sehr vielversprechend aus. Das werde ich dann am Montag testen.

das erste Eingabefeld hat mich zunächt verwirrt, aber ich nehme an, das dient nur zur Visualisierung des generierten Firewall-Logins.

Ja genau. Diese Feld sieht man eigentlich nicht. Hier hilft es jetzt bei der Fehlersuche.

Jetzt stellt sich heraus, dass dieser Fehler nichts mit dem Smartphone zu tun hat. Aber hinterher ist man immer schlauer.