Glücklichere HTML5-Formularvalidierung in Vue

Es ist schon ziemlich cool, dass wir input:invalid {} in CSS verwenden können, um ein Eingabefeld in einem ungültigen Zustand zu gestalten. Wenn man es jedoch genau so verwendet, ist die Benutzererfahrung ziemlich schlecht. Nehmen wir an, Sie haben <input type="text" required>. Das ist *sofort* ungültig, bevor der Benutzer überhaupt etwas getan hat. Das ist eine so schlechte Benutzererfahrung, dass man es in der Praxis nie verwendet sieht. Aber wenn wir nur diese eine Sache vermeiden könnten, könnte der :invalid-Selektor bei der Formularvalidierung viel Arbeit leisten, ohne auf eine große, schicke Bibliothek zurückgreifen zu müssen.

Dave hat eine Idee, die eine Variation des Originalkonzepts aus dem Jahr 2017 ist.

Es ist im Grunde

form.errors :invalid {
  outline: 2px solid red;
}

Jetzt wenden Sie diese nativen Fehlerstile nur bedingt an, wenn *Sie* das Formular als fehlerhaft eingestuft und eine Klasse hinzugefügt haben. Und glücklicherweise ist das Testen auch ziemlich einfach. Wir könnten diese Klasse beim Klicken auf die Sende-Schaltfläche anwenden

submitButton.addEventListener("click", (e) => {
  form.classList.toggle("errors", !form.checkValidity())
});

Oder Sie könnten es tun, wenn ein Eingabefeld den Fokus verliert oder so. Sie könnten sogar jeden Eingabesatz in eine Wrapper-Komponente packen und die Klasse bei Bedarf auf den Wrapper umschalten. Der auskommentierte Code hier könnte Ihnen dabei helfen…

Dave hat diese Idee an Vue weitergegeben

Wir initialisieren die Formular-Komponente mit errors: false, da wir den Fehlerstil erst haben wollen, nachdem der Benutzer das Formular abgesendet hat. Die Funktion invalidateForm setzt einfach this.error = true. Das ist ein Problem mit der CSS :invalid -Pseudoklasse, sie ist viel zu voreilig. Wenn wir uns in die invalid -Ereignisse einklinken, verzögern wir die Styling-Anwendung bis nach dem ersten Versuch der Formularübermittlung und wir wissen, dass das Formular Fehler enthält.

Keine Bibliothek zu verwenden (zusätzlich zu dem, was Sie bereits verwenden), ist ziemlich genial. HTML-Formularvalidierung ist so gut wie vorhanden. Hier ist eine Abzweigung von Daves Idee, bei der auch Fehlermeldungen angezeigt werden

Direkter Link →