Anmeldeformulare sind nur allzu üblich, wenn neue Webanwendungen oder soziale Netzwerke erstellt werden. Die Traktion von Benutzeranmeldungen kann Ihr Selbstbewusstsein in Bezug auf ein Projekt stärken, wenn Sie eine neue Website starten. Aber was können Sie tun, um die Anmeldeerfahrung zu verbessern und hoffentlich mehr interessierte Benutzer zu gewinnen?
In diesem Tutorial möchte ich Ihnen zeigen, wie wir ein geführtes Anmeldeformular erstellen können, das den Benutzern beim Ausfüllen der einzelnen Felder Tipps gibt. Ich habe einige meiner eigenen jQuery zusammen mit einem Plugin namens Progression.js hinzugefügt. Dies ist ein leistungsstarkes Tool, das eine schrittweise QuickInfo mit Hinweisen bietet, um Benutzer auf dem Weg zu führen. Fühlen Sie sich frei, eine Kopie meines Quellcodes herunterzuladen, und schauen Sie sich die Demo-Demo unten an.
Live Demo - Quellcode herunterladen
Fertig machen
Zuerst müssen Sie eine Kopie des Progression.js-Plugins herunterladen und in den Website-Header einfügen. Progression verwendet eine einzelne JS-Datei mit einer Abhängigkeit von der jQuery-Bibliothek sowie eigenen benutzerdefinierten CSS-Stilen. Besorgen Sie sich eine Kopie des offiziellen Github-Repos, die auch eine eigene Mini-Demo-Konfiguration enthält.
Innerhalb des Seitentexts habe ich ein neues Formular mit der ID erstellt #registerform. Dies ist das Seitenelement, an das wir mit Hilfe der Progression-Funktion eine Reihe interner Parameter anhängen. Es ist interessant zu wissen, dass die Tooltips über die gesamte Breite des Formulars selbst angezeigt werden, nicht notwendigerweise über die Länge der Eingabefelder. Sie möchten also sicherstellen, dass auf jeder Seite, auf der Sie die Tooltips (links oder rechts) haben, alles korrekt mit CSS ausgerichtet ist.
Jedes Eingabefeld hat ein zusätzliches HTML5-Datenattribut, das eine Textzeichenfolge für die QuickInfo enthält. Dies ist mit gekennzeichnet Datenhelfer und wird automatisch vom Plugin abgeholt. Ich habe ein tabindex Attribut für jedes Feld, das auch mobilen Benutzern hilft, schnell von einem Feld zum nächsten zu gelangen.
Obwohl diese Form etwas grundlegend ist, werden deutlich die Muster veranschaulicht, die Sie zum Einbinden des Plugins verwenden können. Ich habe auch einige meiner eigenen kleineren jQuery-Logikprüfungen hinzugefügt, die bestimmen, ob der Benutzername lang genug ist, ob die E-Mail-Adresse gültig ist und ob beide Kennwortfelder übereinstimmen. Diese Codes beziehen sich nicht auf das Plugin, können aber dennoch für Entwickler hilfreich sein, die ähnliche Arten von Webformularen erstellen.
Seitendesign mit CSS
Ein weiteres wichtiges Stück meines Codes finden Sie im styles.css Stylesheet. Ich setze die Standardseite zusammen mit dem Core-Wrapper zurück, erinnere mich jedoch, dass das Formular eine genaue Breite haben muss, die der Länge der Eingabefelder entspricht.
Das #registerform Das Element ist mit einer Gesamtbreite von 512px gesperrt. Die internen Beschriftungs- / Eingabefelder haben eine Breite von 160px + 340px (insgesamt 500). Die Beschriftungs- und Eingabefelder lassen mehr Platz zum Auffüllen, so dass der Tooltip nicht direkt auf etwas steht. Auch die .basetxt Die Klasse wird auf jede Eingabe angewendet, die CSS3-Übergänge zum Einfärben des Rahmens und des Schatteneffekts verwendet.
Ein weiterer wichtiger Teil dazu bezieht sich auf die Fehlermeldung p.errmsg. Sie finden diese unter drei der vier Felder, die sich alle auf die jQuery-Validierungsprüfungen beziehen. Die Nachrichten werden standardmäßig mit verborgen Anzeige: keine und dann mit der .slideDown () - Methode von jQuery angezeigt.
Diese letzten Codeblöcke definieren die Übergabeschaltflächenstile sowie einige benutzerdefinierte Designs für die QuickInfo. Sie können einfach die Haupt-Plugin-CSS-Datei bearbeiten, dies macht es jedoch in Zukunft schwieriger, ein Upgrade durchzuführen. Es kann auch schwierig sein, genau zu wissen, was Sie bearbeitet haben, und das Zurücksetzen der Änderungen wäre nahezu unmöglich. Wenn Sie einige der Plugin-Stile überschreiben möchten, wählen Sie einfach durch Progression.min.css und erfahren Sie, welche Klassen Sie ansprechen müssen.
jQuery Progression & Validation
Am Ende der Indexseite vor dem Schließen tag Ich habe einen neuen JavaScript-Abschnitt geöffnet. Dies beinhaltet die Initialisierung von Progression.js sowie einige meiner eigenen Validierungsprüfungen. Es ist etwas kompliziert, aber ich werde es in kleinere Stücke aufteilen.
Wir richten uns an das Anmeldeformular, das wir anrufen .Progression() mit einer Reihe von internen Parametern. Ich denke, die meisten (wenn nicht alle) dieser Parameter können für sich selbst sprechen und die Plugin-Dokumentation kann auch viel erklären. showProgressBar Ich habe dieses Beispiel deaktiviert, da ich der Meinung bin, dass es mit nur 4 Eingängen nicht gut funktioniert. Es gibt jedoch ein Gefühl der Zufriedenheit der Benutzer, wenn Sie eine große Anzahl von Feldern benötigen, da sich die Benutzer tatsächlich in Richtung Fertigstellung bewegen können.
Ebenfalls tooltipPosition und TooltipWidth Es kann sich lohnen, anzupassen und zu sehen, wie sie am besten in Ihre Formulare passen. Die anderen Einstellungen wie Farben und Schriftgrößen lassen sich sehr einfach bearbeiten und passen in jedes Design. Beachten Sie auch, dass ich einen .submit () - Ereignishandler an dieses Formular gekettet habe. Immer wenn das Formular gesendet wird, rufen wir .preventDefault () für das Submit-Ereignis auf, um die Ausführung zu verhindern. Dies liegt daran, dass mein Formular über keine echten Aktionsattribute verfügt. Bei einem Live-Arbeitsformular sollten Sie jedoch diesen verketteten Ereignishandler vollständig entfernen.
Jeder der letzten 3 Validierungsblöcke überprüft, wann immer der Benutzer ein Eingabefeld verwischt. Dieser erste Code wird ausgeführt, nachdem der Benutzer den Fokus festgelegt hat, und verwischt das Feld für den Benutzernamen. Wenn der Benutzername weniger als 6 Zeichen lang ist, wird die Fehlermeldung darunter angezeigt. Andernfalls, wenn der Benutzername 6 Zeichen oder mehr ist, können wir die Fehlermeldung ausblenden, sofern sie bereits angezeigt wird.
Diese letzten beiden Validierungsprüfungen basieren auf derselben Art von Logik. Das erste ist das E-Mail-Eingabefeld, das eine Regex-Zeichenfolge verwendet, um nach einer gültigen E-Mail-Adresse zu suchen. Ich habe diese Lösung in einer verwandten Stack Overflow-Frage gefunden, die eine einfache, aber effektive E-Mail-Syntax bietet. Dieses Beispiel sollte mehr als ausreichend sein, um mit allen gängigen E-Mail-Adressen umgehen zu können.
Beim Überprüfen der Kennwortüberprüfung werden Sie feststellen, dass dies nicht der Fall ist, nachdem der Benutzer das sekundäre Kennwortfeld verwischt hat. In diesem Fall muss der Benutzer sein Kennwort erneut eingeben, und es wird mit beiden Werten verglichen, um sicherzustellen, dass sie gleich sind nicht vollständig leer / leer. Ich habe es überprüft, um sicherzustellen, dass das Passwort mindestens 1 Zeichen lang ist, aber Sie könnten die Einschränkungen strenger machen, wenn dies erforderlich ist.
Es gibt einige jQuery-Plugins, die tatsächlich dazu beitragen, diese Art von Validierungsprüfungen auszuführen. Wenn Sie mit dem Scripting vertraut sind, schadet es nicht, nur Ihre eigenen Regeln von Grund auf zu schreiben.
Live Demo - Quellcode herunterladen
Schließen
Die Entwickler von jQuery haben eine Reihe von Plugins für die Formularentwicklung entwickelt.Anmeldeformulare sind oft eine schwierige Herausforderung, da sie eine große Menge an Informationen benötigen. Die Anwendung dieser Progressions-Tooltips kann die Benutzer wirklich dazu ermutigen, den Anmeldeprozess schnell und ohne viel Zögern durchzusetzen und abzuschließen. Wie immer kann mein Tutorialcode kostenlos heruntergeladen und in eigene Webprojekte implementiert werden. Wenn Sie Fragen oder Anregungen haben, teilen Sie uns dies im Diskussionsbereich mit.