Formularvalidierung in Wave defekt

Hallo Leute,

ich habe den Eindruck, dass bei Wave in der Validierung der Benutzereingaben z.B. im Registrierungsformular ein Knoten drin ist. Genauer: Required-Fehler verhindern zwar das Abschicken des Formulars, wenn sie leer sind, geben aber längst nicht immer eine Fehlermeldung aus. Das führt dazu, dass Kunden nicht kapieren, warum sie sich nicht registrieren oder ihre Liefer- oder Rechnungsadresse ändern können.

So lässt sich der Fehler reproduzieren:

  • Shop auf Wave umstellen (z.B. auf https://demoshop.oxid-esales.com)
  • Registrierungsformular aufrufen und alle Felder füllen, aber
  • das Feld “Nachname” leer lassen
  • auf “Abschicken” klicken.

Das Formular lässt sich nicht abschicken, der Cursor wird ins Feld “Nachname” gesetzt, aber es steht keine Fehlermeldung darunter.

Die erscheint witzigerweise nur dann, wenn man das Feld “Vorname” auch leert - dann aber nur beim Nachnamen, obwohl auch der Vorname ein Pflichtfeld ist.

Ein ähnliches Verhalten beobachte ich bei den Feldern “PLZ” und “Ort”.

Hat das schon jemand beobachtet? Und vielleicht sogar eine Lösung gefunden? :slight_smile:

Inzwischen habe ich eine genauere Fehlerbeschreibung:

Es ist immer das erste leere Required-Feld, bei dem die Fehlermeldung nicht erscheint. Wenn man also drei solche Felder leer lässt, bekommen beim Abschickversuch nur die unteren zwei die Klasse “text-danger” und die Fehlermeldung “Bitte Wert angeben” im Element “help-block”.

Das ist unabhängig davon, wie viele Nicht-Pflichtfelder im Formular stehen und ob diese voll oder leer sind.

Ich bin der Sache noch ein bissel näher gekommen: Hier stören sich zwei - einzeln betrachtet sinnvolle - Funktionen gegenseitig.

  • Der Validator setzt den Fokus automatisch auf das erste Feld, das beanstandet wird.
  • Wenn ein beanstandetes Feld den Fokus bekommt, wird die Fehlermeldung ausgeblendet.

Deshalb verschwindet die Fehlermeldung beim ersten beanstandeten Feld sofort wieder. Und wenn nur eines beanstandet wird, dann sieht der User keine Fehlermeldung und wundert sich, warum man das Formular nicht abschicken kann …

Hallo @snorri,

vielen Dank für Deinen Monolog bisher. Wenn Du die Lösung kennst, kannst Du gern einen Pull-Request schicken: https://github.com/OXID-eSales/wave-theme

Falls nicht, mach einfach einen Bug-Report auf: https://bugs.oxid-esales.com

Hei Marco!

Ich weiß nicht, ob dieser Fix reif für einen Pull Request wäre, aber nach längerer Suche habe ich das Problem für mich mit diesem Stück JS gelöst:

$(function () {
    $('input.form-control, textarea.form-control, select.form-control').each(function() {
        $(this).unbind(["keyup", "focus", "blur", "click", "keydown", "keypress"].join(".validation ") + ".validation");
    });
});

Das sorgt dafür, dass die Neuprüfung nur bei einem Change-Event ausgelöst wird, nicht schon beim Fokus. Damit verhält sich das Formular so, wie ich es erwarten würde: Die Fehlermeldung geht erst weg, wenn der Fehler beseitigt wurde, nicht schon beim Anklicken.

1 Like