Share
TL; DR Ersetzen Sie Ihre JavaScript-Validierung durch die HTML5-Validierung. Es ist einfacher als Sie denken, und bietet Ihnen eine Menge Markup- und Styling-Steuerelemente. Versuchen Sie diese Demo:
Sie müssen also ein Formular validieren. Sie machen das Richtige und beginnen mit der serverseitigen Validierung. Wenn Sie ein guter Web-Designer sind, fügen Sie eine clientseitige Validierung hinzu, damit Ihre Benutzer Feedback erhalten, ob sie das Formular korrekt ausgefüllt haben oder nicht. Wenn Sie ein wirklich guter Webdesigner sind, können Sie dieses Feedback sogar sofort abgeben. Der Benutzer wird darauf aufmerksam gemacht, dass er eine gültige E-Mail-Adresse eingegeben hat, sobald diese zu einer gültigen E-Mail-Adresse wird.
Sie erreichen Ihre Lieblings-jQuery-Bibliothek. Vielleicht sind Sie sogar cool genug, um eine Vanille-JavaScript-Bibliothek zu verwenden.
Sie fügen zusätzliche Markierungen hinzu. Etwas umgestalten… einige JavaScript-Validierungsregeln hinzufügen. Verbinden Sie das JavaScript über AJAX mit dem Server. Schlagen Sie Ihren Kopf ein paar Mal gegen die Tastatur, weil Sie dies seit ein paar Monaten nicht mehr getan haben und genau nachsehen müssen, wie diese neue JavaScript-Validierungsbibliothek Dinge tut… und so weiter.
Du bekommst das Bild. Das ist kein Spaß.
Was wäre, wenn Sie all dieses JavaScript-Material überspringen und nur mit HTML5-Attributvalidatoren und CSS überprüfen könnten?
Grob ausgedrückt: Sie fügen Attribute wie hinzu erforderlich oder type = "email" zu Felder und Ihr Browser erledigt den Rest.
Versuchen Sie, das Formular in dieser CodePen-Demo ohne Inhalt zu senden. Versuchen Sie dann, es ohne gültige E-Mail-Adresse zu senden:
Möglicherweise haben Sie festgestellt, dass Sie eine E-Mail eingeben möchten a @ a. Natürlich möchten Sie eine echte E-Mail-Adresse. Wenn Sie also ein genaues Muster angeben, zu dem unsere Daten passen müssen, können wir überprüfen, was eingegeben wurde. Vergewissern Sie sich, dass das Muster mit einem Punkt und zwei oder drei Zeichen am Ende übereinstimmt. Wir können dies mit der Muster Attribut und Regex.
Wenn Sie das Regex lernen wollen, müssen Sie darüber hinwegkommen. Regex ist unglaublich leistungsfähig und in jeder Art von Programmierung, die Sie jemals machen werden.
Ich bin für komplizierten Regex furchtbar schrecklich, also habe ich nach "email regex" gegoogelt (da ich sicher bin, dass dies bereits gelöst wurde) und am Ende einen auf regular-expressions.info gefunden habe. Hier ist unser Regex auf regex101.com (eine sehr nützliche Ressource zum Testen Ihrer regulären Ausdrücke).
^ [A-Za-z0-9 ._% + -] + @ [A-Za-z0-9 .-] + \. [A-Za-z] 2, $
Wenn Sie ein wenig über das Muster lesen, werden Sie feststellen, dass der Autor die Übereinstimmungen mit Kleinbuchstaben ausgeschlossen hat, da von Ihnen erwartet wird, dass Sie ein Kennzeichen verwenden, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird. HTML5-Eingabemuster akzeptieren keine Flags. Um Kleinbuchstaben zu erhalten, müssen wir den Groß- und Kleinbuchstabenbereich hinzufügen (z. A-Za-z). Sie können genau lesen, was jeder Teil des Musters im rechten Fensterbereich tut.
Damit unsere Validierungsfehler etwas anderes als "Falsches Format!" Werfen, können wir ein angeben Titel Attribut mit einem Überprüfungsfehler wie folgt:
Versuchen Sie nun die E-Mail-Eingabe in dieser Demo:
Keine Sorge, Sie müssen nicht für jede Eingabe, die Sie haben, verrückte Muster schreiben. In den meisten Fällen möchten Sie einfach etwas anfordern und sicherstellen, dass es sich um einen bestimmten Datentyp handelt. Zum Beispiel könnte eine Zahl über 5 aussehen .
Beachten Sie, dass nicht alle Browser alle verschiedenen Validierungsattribute unterstützen. Zum Beispiel unterstützt FireFox nicht minimale Länge. Muster Der Support ist ziemlich gut, so dass Sie die Funktionalität immer replizieren können. minimale Länge kann mit repliziert werden pattern = ". 3," woher 3 so lange es auch sein muss.
Wenn Sie in Ihrer alten JavaScript-Bibliothek kein Muster finden können, auf das Sie Zugriff hatten, können Sie es wahrscheinlich durch Durchsuchen des Quellcodes finden, da die JavaScript-Bibliothek letztlich mit den gleichen Regex-Mustern übereinstimmt wie wir.
Wäre es nicht schön, wenn unsere Eingaben während ihrer Gültigkeit Hinweise anzeigen würden? Zum Glück gibt es eine :gültig CSS-Selektor dafür. Es gibt auch eine :ungültig Wähler. Geben Sie Ihren Namen in dieser Demo ein:
Sie werden den offensichtlichen Nachteil bemerken, dass ungültige Stile angezeigt werden, noch bevor wir die Eingabe berührt haben.
Sie könnten darüber nachdenken, etwas zu tun : ungültig: nicht (: leer) Dies funktioniert jedoch nicht, da Browser dumm sind und Formularelemente immer als leer betrachten.
Wir könnten mit dem Neuen Tricks machen : Platzhalter angezeigt Pseudo-Selector wie in der folgenden Demo gezeigt, aber Browser-Unterstützung für : Platzhalter angezeigt ist schrecklich und es gibt noch keine moderne Polyfill. Mist.
Im Moment ist es am besten, JavaScript hinzuzufügen, um eine Klasse umzuschalten, je nachdem, ob die Eingabe leer ist oder nicht. Hier ist die Arbeitsdemo:
Mein Lieblingsteil bei diesem Ansatz ist, dass Sie die vollständige CSS-Kontrolle über jeden Teil Ihres Formulars haben.
Durch Drücken der unter dem wir erhalten Zugriff auf die benachbarte Geschwisterauswahl auf unserer .leeren Klasse. Wir können dann einen falschen Platzhalter erstellen, der schön aus dem Weg geschoben wird, sobald die Eingabe nicht mehr leer ist. Hier ist ein Beispiel:
Wenn die unter der sein Ihre Gefühle beleidigt oder nicht zugänglich genug ist, können Sie das JavaScript jederzeit anpassen, um die leeren Klasse zum stattdessen. Dann ist es nur eine Frage der CSS-Anpassung. Hier ist ein Beispiel, wie es so gemacht wird:
Die Validierungsklassen funktionieren auch auf der Element, so dass Sie mit Style-Kontrolle wirklich verrückt werden können.
Es gibt keine Grenzen dafür, was Sie mit diesem Ansatz erreichen können. Einige Ideen:
Es gibt keine Möglichkeit, die Validierungsnachrichten zu formatieren. Browser haben die Möglichkeit deaktiviert, diese zu formatieren. Ich denke nicht, dass dies eine schlechte Sache ist, da die Leute an diese Validierungsstile gewöhnt sind. Wahrscheinlich haben Browser deshalb entschieden, unseren Zugang zu ihnen zu verbessern. Jetzt sind sie standardisiert.
Sie sind auch außerhalb des Flusses der Seite, sodass Sie sich keine Sorgen machen müssen, dass sie Formelemente mit ihrem Erscheinungsbild herumschieben.
Wenn Sie unbedingt vollständige Kontrolle über Validierungsstile benötigen, ist diese Methode möglicherweise nicht für Sie geeignet.
Ich bin sehr gespannt auf ein Feedback und würde gerne coole Validierungsstile / -techniken sehen!
Danny Kings Blogpost "Adaptive Placeholders" brachte mich dazu, darüber nachzudenken.
Accentsconagua