Javascript-Validierung: Eingaben nach Fehlern überprüfen und entsprechend reagieren

[Rolf B]

Hallo borisbaer,

doch dann musste ich merken, dass dieser Weg bei mehreren Formularen auf einer Seite nicht funktioniert, denn jedes einzelne Formular befüllt dieses Array gleichermaßen.

Das scheint mittlerweile gelöst zu sein. Wenn ich bei Registrierung was eingebe, passiert bei Login nichts mehr.

Aaaaaber...

• Ich habe ein Zeichen im Benutzernamen eingetippt und das ganze Formular wird rot. WTF? Du solltest im input-Event nur das Element prüfen, das gerade bearbeitet wird, und Tests wie "mind. 2 Zeichen" im input zu prüfen ergibt keinen Sinn. Ob die Eingabe zu kurz ist, weißt Du erst, wenn der User das Feld verlässt (change-Event). Ob es sinnvoll ist, im blur-Event Validierungen durchzuführen, weiß ich auch nicht. Ich tabbe nur durch's Formular und gleich wird alles rot - das ist ganz schön deprimierend.

• Ich wollte Benutzername "Müller" eingeben. → Der Benutzername darf nur alphanumerische Zeichen enthalten. WTF?

• Deine Password-Reveal Button funktioniert nicht.

Dann habe ich mir deinen Code angeschaut.

document.addEventListener( 'DOMContentLoaded', () => {

	const formSb = document.querySelectorAll( 'form button:not([type="button"])' );
	formSb.forEach( node => {
		const form = node.closest( 'form' );
		node.onclick = e => {

Das ist in mehrfacher Beziehung der falsche Ansatz.

1. Du musst nicht die Submit-Buttons suchen und dann deren Form, sondern direkt die Forms. Denn so läufst Du für das sign-up und das sign-in Form zweimal da durch. Gut, dass Du onclick und onkeydown verwendst und nicht addEventListener.
2. Form-Validation macht man nicht im click-Handler des submit-Buttons, sondern im submit-Event des Forms
3. Feld-Validation macht man nicht im keydown-Handler eines input-Elements, sondern im input-Event für Sofortprüfungen und im change-Event für Prüfungen beim Verlassen des Feldes.
4. Das erspart Dir dann auch den setTimeout im keydown-Event. Der ist vermutlich drin, damit die FM nicht schon kommt, bevor Du die Taste losgelassen hast...

		if ( rule === 'verify' ) {

			input.onblur = () => {

				fetch( `/verify?${input.name}=${encodeURIComponent( value )}` )

WHOA! Du setzt bei jedem Tastendruck zweimal einen neuen blur-Handler. Aber eben auch erst bei einem Tastendruck. Ohne einen Tastendruck gibt's keinen blur-Handler. Da die verify-Regel bei jedem Tastendruck angestoßen wird, solltest Du an dieser Stelle keine Eventhandler registrieren. Sowas macht man einmal vorneweg. Aber wie auch immer - der fetch sollte nicht im onblur passieren, sondern im change-Event.

Kennst Du eigentlich unsere Wiki-Artikel zur browsereigenen Validierung in HTML und JavaScript? Die nimmt Dir etliche deiner Probleme automatisch ab, weil sie die Fehlerbehandlung pro Formular durchführt.

Damit würde dein validation.js ganz anders aussehen und vieles, was Du jetzt manuell programmiert hast, automatisch passieren.

Rolf