de.hideout-lastation.com
Validieren Sie Formulareingaben problemlos in jedem Browser mit Validatr
Der Umgang mit Formularen im Web kann sehr interessant sein. Sie können viele Anpassungen im Design, auf dem Etikett und sogar bei der Authentifizierung vornehmen. Mit vielen neuen Funktionen, die in HTML5 verfügbar sind, hat Jay Morrow Validatr erstellt, die sich auf die neuen HTML5-Eingabeattribute verlassen, um eine einfache und automatische Formularvalidierung durchzuführen.
Validatr ist ein browserübergreifendes kostenloses jQuery-Plugin. Wenn der Benutzer einen ungültigen Wert eingibt, wird der Formularrahmen automatisch rot umbrochen. Es kann auch viele Eingabe-Validierung wie E-Mail, Nummer, URL, Bereich, Farbeingaben und Datum .
Benutzerdefinierte Fehlermeldungen sind ebenfalls mit verschiedenen Optionen verfügbar, die HTML5-Datenattribute verwenden. Sie können das Element der Fehlermeldung mit Ihrem eigenen CSS anpassen, und das Plugin hat einige ziemlich gute CSS-Stile.
Grundlegende Anleitung
Um Validatr zu verwenden, fügen Sie das neueste jQuery und auch das Validatr-Skript in Ihr Projekt ein.
Dann rufe das Plugin mit folgendem Snippet auf:
Das Plugin erkennt das form, um Änderungen zu übernehmen.
HTML-Markup
Wie bereits erwähnt, verwendet Validatr das input zum Arbeiten. Das Element ist in das form Tag eingeschlossen. Das input behandelt alle verschiedenen Formulartypen und Einstellungen mit HTML5 data-attribute .
Wenn Sie beispielsweise ein Zahlenformular erstellen möchten, fügen Sie einfach type="number" in die input und einige zusätzliche Anforderungen ein, z. B. die Begrenzung der Mindest- und Höchstzahl. Wenn die Benutzer das Formular nicht leer lassen dürfen, fügen Sie einfach das required Attribut hinzu.
Das folgende ist ein grundlegendes Implementierungsbeispiel:
Das step wird für Wertinkremente verwendet, wenn der Benutzer im Formular auf den Pfeil zum Erhöhen oder Verringern klickt, beginnend innerhalb der definierten min oder 0. Wenn der Wert auf "0" gesetzt ist, wird Standardinkrement verwendet oder nur eins erhöht Punkt (der Wert muss eine positive Zahl sein).
Und hier ist das Ergebnis, wenn ein Benutzer einen ungültigen Wert oder eine Bereichsnummer eingibt. Unser Beispiel verwendet 2 für den step was bedeutet, dass beginnend mit 1 die einzigen Zahlen, die gültig sind, ein Inkrement von 2 haben, das heißt: 3, 5, 7 und so weiter. Der maximale Wert ist 11.
Eine vollständige Liste der anderen Eingabearten und der Attributdokumentation finden Sie auf der Validatr-Seite.
Frische Ressourcen für Web-Entwickler - August 2017
Es gibt eine Reihe von Open-Source-Unternehmen, die sich zusammengeschlossen haben, um nützliche Webressourcen und Tools bereitzustellen, die jeder kostenlos nutzen kann . Dies ist es, was die Web-Community dazu bringt, zu gedeihen, zu innovieren und mehr nützliche Ressourcen zu produzieren.In dieser Ausgabe der Fresh Resources-Serie habe ich eine Reihe neuer Ressourcen aus verschiedenen Kategorien zusammengestellt, darunter eine App, mit der Sie Sketch-Plugins auf verschiedenen Computern verwalten können, eine Sammlung von ikonischen Schriften für Ihre Nerd-Seele, ein paar Desktop-Apps und ein
LayoutIt! - Erstellen Sie HTML-Bootstrap-Layouts mit Leichtigkeit
Wenn Sie eine responsive Website erstellen möchten, ist Bootstrap ein praktisches Werkzeug für Sie. Diese neueste Framework-Innovation hat Webentwicklern einen neuen Ansatz zur Erstellung einfacherer, schnellerer und besser reagierender Websites und Apps im Allgemeinen ermöglicht.Aber es ist ziemlich schwierig und zeitaufwändig, ein Layout von Grund auf neu zu erstellen. Um
