autofocus

[mapfei]

Hi,

ich habe im verwendeten Seitenlayout unter JavaScript-Templates das Template js_autofocus ausgewählt. Allerdings wird beim Absenden eines Formulars nicht an die entsprechende Stelle (p.error) gesprungen. Woran kann das liegen?

Viele Grüße,
mapfei

[Tim]

Wenn das Formular eine html5-Validierung nutzt, wird keine .error Klasse geschrieben. Für das Script muss man die herkömmliche PHP Validierung nutzen und in den Formular-Einstellungen html5-Validierung gezielt deaktivieren.

[mapfei]

Hm, okay. Wenn ich aber beispielsweise die HTML5-Validierung ausschalte und in einem Feld mit Datumsprüfung ein falsches Format angebe, dann wird nicht an diese Stelle gesprungen,sondern das Captcha eingeblendet.

Bei eingeschalteter HTML5-Validierung wird außerdem auch ein p.error mit "Bitte geben Sie das Datum im Format "TT.MM.JJJJ" ein!" erzeugt. Müsste das Script hier nicht dennoch funktionieren?

[Tim]

Das Script schaut aber bei Pageload, nicht bei einem Status-Wechsel der html5-Validierung.

Ja, Captcha ist ein Pflichtfeld.

[mapfei]

Verstehe. Ist aber für den User blöd, denn das eigentlich "wichtige" Feld steht weiter oben, das Captcha hingegen unten und somit weiss der User nicht, was Sache ist. Kann man das irgendwie anders lösen?

[Tim]

An die native Validierung kommt man wohl nicht ran. Es braucht einen Event-Listener auf dem Feld, das bei .blur getriggert wird.
https://stackoverflow.com/questions/...orm-validation

Wäre eigentlich mal was für das Template im Contao-Kern. Ich nehme es mal als Feature-Request auf.

[mapfei]

Wie könnte denn so ein Script aussehen? Ich bekomme es irgendwie nicht hin. Weder mit noch ohne HTML5-Validierung. Die Fehlermeldung bleibt immer bei der Captcha-Eingabe hängen, statt z.B. beim falschen Datumsformat.

[Tim]

Bei aktiver HTML5-Validierung braucht es eigentlich kein autofocus Script. Die Browser springen selbstständig zu dem Feld.

[mapfei]

Schon, aber nicht in dem Falle, wenn z.B. als Datumsformat TT.MM.JJJJ angegeben ist und der Besucher TT.M.JJJJ angibt. Das wird dann erst bei Absenden des Formulars geprüft.

[Tim]

Schon, aber nicht in dem Falle, wenn z.B. als Datumsformat TT.MM.JJJJ angegeben ist und der Besucher TT.M.JJJJ angibt. Das wird dann erst bei Absenden des Formulars geprüft.

Aber dann sollte doch das normale js_autofocus greifen. Das prüft bei pageload und hier würde jetzt die .error Klasse auf dem input liegen.

ps. Ich glaube ich verstehe jetzt. Die Html5-Validierung ist befriedigt, aber Contao selbst validiert nicht. Damit bleibt das Feld falsch gefüllt.

Man würde hier mit einem input date Feld arbeiten (EX macht es so) und dort ein required pattern übergeben

Referenz: https://developer.mozilla.org/en-US/...ent/input/date

<input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}">

[mapfei]

So ist es ja auch. Allerdings erscheint bei Absenden des Formulars auch das Captcha und das wird scheinbar priorisiert behandelt? Das Datumsfeld wirft einen Fehler mit p.error aus. Das Script ist auch drin im Footer.

 <script>  (function() {  var p = document.querySelector('p.error') || document.querySelector('p.confirm');  if (p) {  p.scrollIntoView();  }  })();  </script>

[mapfei]

Okay, auch ne Möglichkeit, um eine Fehleingabe zu verhindern. Worin besteht der Unterschied in den beiden Templates datepicker und datepicker_short?

[Tim]

Das Captcha hat immer Prio1. Es wird angezeigt, wenn der honypot scheitert.

Ich ergänze eine html5 pattern validierung in den Templates.
---
_short ist nur für den Javascript-Picker interessant. Dieser greift standardmäßig nur noch in Safari als Fallback, weil Safari keinen Browser-eigenen Datepicker hat. "short" ist eine Auswahl ohne Jahr.