Erstellen Sie bessere Webformulare mit JavaScript

Webformulare sind die grundlegende Methode zur Bereitstellung von Dateninteraktion im Web. Es ist frustrierend für einen Benutzer, ein Formular auszufüllen und auf eine schlechte oder fehlerhafte Validierung zu stoßen. In diesem Lernprogramm erfahren Sie, wie Sie ein benutzerfreundliches HTML5-Webformular erstellen.

Quaid JS ist die Open Source-Version einer internen JavaScript-Validierungsbibliothek, die seit über einem Jahrzehnt gepflegt und aktualisiert wird. Die aktuelle Version nutzt die besten HTML5-Formulare und erweitert die integrierten Funktionen um einfach zu implementierende Validierungsregeln und benutzerfreundliches Verhalten.

Hier klicke ich weiter, aber nichts passiert. Stellen Sie mithilfe des for-Attributs sicher, dass Ihre Beschriftungen mit ihren Feldern verknüpft sind



Hier klicke ich weiter, aber nichts passiert. Stellen Sie mithilfe des for-Attributs sicher, dass Ihre Beschriftungen mit ihren Feldern verknüpft sind

Einstieg

Setzen Sie einige Strukturelemente ein, bevor Sie mit dem Formular beginnen. Normalerweise beginne ich mit einer angepassten Version des HTML5 Boilerplate , was mit dem Wesentlichen kommt Modernizr eingebrannt. Fügen Sie asynchrone Verweise auf hinzu jQuery und Quaid JS kurz vor Ihrem schließenden Body-Tag. Jetzt können Sie ein Formular erstellen. (Vergessen Sie nicht, die Skripte in der Produktionsumgebung zu kombinieren und zu minimieren.)

  • Laden Sie die Quelldaten für dieses Tutorial
yepnope([{ load: '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', callback: function(url, result, key){ if (!window.jQuery){ yepnope('script/jquery-1.8.3.min.js'); } } } ,{load:'script/quaid-1.0.js'} ,{load:'script/quaid-au-1.0.js'} ]);

Ein Formular erstellen

Starten Sie das Formular, indem Sie das Formular und die ersten Feldsatzelemente hinzufügen:

Technisch gesehen sollten Sie eine Beschriftung für Feldsätze verwenden, aber ich finde, dass es nahezu unmöglich ist, sie konsistent zu gestalten. Ich bevorzuge die Verwendung von Standard-HTML-Headern:

First Form

Fügen Sie ein Blockelement (p, li, th oder td) hinzu, das jede Beschriftung und jedes Feld enthält. Denken Sie daran, das Attribut for beim Hinzufügen einer Beschriftung anzugeben. Ohne sie können Sie nicht auf eine Beschriftung tippen / klicken, um sich auf das zugehörige Feld zu konzentrieren - entscheidend bei schwer zu klickenden / tippenden Optionsfeldern und Kontrollkästchen. Stellen Sie eine geeignete Feldgröße ein und geben Sie den Benutzern an, wie viel sie eingeben sollen. Wenn die Felddaten in eine Datenbank verschoben werden, stellen Sie die maximale Länge auf das entsprechende Datenbankfeld ein. Dies ist eine Standard-HTML5-Eingabe, die mit dem erforderlichen Attribut gekennzeichnet ist:

Name

Das E-Mail-Feld verwendet die E-Mail vom Typ HTML5, die die E-Mail-Validierung von Quaid JS auslöst. Wenn Sie Ihre eigene E-Mail-Validierung durchführen, achten Sie auf einen zu einfachen regulären Ausdruck - E-Mail-Adressen sind komplexer als ursprünglich angezeigt:

Email

Dieses Feld ist hervorgehoben und zeigt die zugehörige Fehlermeldung bei Hover und Fokus an

wie man in digitaler Kunst gut wird
Dieses Feld ist hervorgehoben und zeigt die zugehörige Fehlermeldung bei Hover und Fokus an

Während HTML5 den Tel-Eingabetyp einführt, bietet es keine Möglichkeit, bei Bedarf zwischen verschiedenen Arten von Telefonnummern zu unterscheiden (z. B. Mobilfunk und Festnetz). Quaid sucht einfach nach einer Klasse, die den Trick macht.

Seit einiger Zeit besteht die Konvention zum Markieren erforderlicher Felder darin, irgendwo in der Nähe des Felds oder der Beschriftung ein Sternchen hinzuzufügen. Da die meisten Formularfelder erforderlich sind (wenn nicht, warum schließen Sie sie ein?), Ist es viel benutzerfreundlicher, optionale Felder zu markieren.

Variieren Sie den Text, um zu erklären, warum das Feld optional ist und warum ein Benutzer es möglicherweise ausfüllen muss:

Mobile Phone (if you have one)

Postleitzahlen passen zu festgelegten Mustern, was die Validierung sehr einfach macht. Da es keinen Eingabetyp für Postleitzahlen gibt, wählt Quaid JS die entsprechende Klasse (Postleitzahl) aus, um die Validierung hinzuzufügen.

Erweitern Sie dies, indem Sie mit einem benutzerdefinierten Ajax-Aufruf anhand einer Datenbank validieren. Verlassen Sie sich jedoch nicht auf die Datenquelle und lassen Sie Benutzer Korrekturen vornehmen, die über die Grundlagen hinausgehen.

Australische Postleitzahlen geben eine ziemlich genaue Vorhersage des assoziierten Staates. Mithilfe brillanter HTML5-Datenattribute können wir Quaid anweisen, Statusauswahlfelder vorherzusagen. Da australische Postleitzahlen nur Ziffern sein können, verwenden Sie das Musterattribut - ansonsten am besten vermieden -, um eine numerische Tastatur für iOS-Besucher auszulösen. Versuchen Sie außerdem, einen Geolokalisierungscode einzugeben, um Adressfelder automatisch auszufüllen:

Postcode

Ausgewählte Felder sind im Allgemeinen unkompliziert. Beachten Sie jedoch, dass Sie eine leere Option benötigen, um die Auswahl eines Standardwerts zu verhindern (sofern dies angemessen ist):

State New South Wales Northern Territory Queensland South Australia Tasmania Victoria Western Australia

In HTML5 ist eine Auswahl von Datumseingabetypen verfügbar, deren Implementierung derzeit jedoch bestenfalls umständlich ist. Verwenden Sie eine Klasse, um Datumsfelder zu markieren, und überlassen Sie Quaid die Validierung, bis sich eine bessere Option ergibt. Datepicker-Steuerelemente können einfach hinzugefügt werden, indem Elemente mit derselben Datumsklasse ausgewählt werden.

wie man Kunstaufträge einrichtet

Durch Ändern der Stile von schreibgeschützten Feldern können Sie leicht erkennen, dass sie nicht bearbeitet werden können

Durch Ändern der Stile von schreibgeschützten Feldern können Sie leicht erkennen, dass sie nicht bearbeitet werden können

Da ich hier ein bestimmtes Muster erwarte, habe ich einen Platzhalter verwendet, um den Benutzern einen Hinweis darauf zu geben, was ich erwarte:

Date (if applicable)

Für diejenigen von uns, die viel zu viele Stunden mit Webformularen arbeiten, ist das Attribut maxlength für Textbereiche eine der besten Ergänzungen zu HTML5-Formularen. Quaid rüstet die Funktionalität für Browser nach, die sie nicht nativ unterstützen:

Description (if known)

Bedingt sichtbare Felder lassen sich auch mit Datenattributen leicht erreichen. Der Wert des variablen Felds, Daten-Sichtbares-Feld, steuert, ob das Zielfeld entweder durch Aktivieren (für Radios und Kontrollkästchen) oder durch Abgleichen mit dem optionalen Daten-Sichtbaren-Wert-Wert erforderlich ist.

Erforderliche Felder funktionieren auf die gleiche Weise, indem die Attribute 'Daten erforderlich' und 'Optionale Daten erforderlich' entsprechend verwendet werden:

Show Me Something

Conditional

Die folgenden sichtbaren und erforderlichen Zustände variieren je nach ausgewähltem Wert des Zustandsfelds. In diesem Fall ist das Feldset sichtbar und das Feld wird benötigt, wenn der Bundesstaat Westaustralien ausgewählt wurde:

Conditional Value Field

Fügen Sie dem Musterattribut numerischer Felder den regulären Ausdruck  d * hinzu, um die Zehnertastatur in Apple iOS auszulösen

Fügen Sie dem Musterattribut numerischer Felder den regulären Ausdruck d * hinzu, um die Zehnertastatur in Apple iOS auszulösen

Über die oben gezeigten Validierungsregeln hinaus verfügt Quaid JS über die folgenden Validierungsregeln, die in der Klasse eines Felds festgelegt werden können:

  • Zeit
  • Jahr
  • (Positiv) Numerisch
  • (Positive ganze Zahl
  • (Positive) Währung
  • Kreditkarte
  • CSC (Card Security Code oder einer seiner vielen Aliase)

Benutzerdefinierte Validierung

Die oben gezeigten Standardregeln decken die meisten Validierungsanforderungen ab. Möglicherweise müssen Sie jedoch Ihre eigenen benutzerdefinierten Validierungsregeln schreiben:

Custom (min. 4 characters)

Quaid JS bietet drei benutzerdefinierte jQuery-Methoden an: Inline, Submit und Ajax. Inline können benutzerdefinierte Regeln ausgelöst werden, während Benutzer das Formular ausfüllen, bevor es gesendet wird:

wie man einen realistischen Hund Schritt für Schritt einfach zeichnet
$('#custom').addValidation(function(el){ el.isValid = el.value.length > 3; if (!el.isValid) { el.errorMessage = 'Please enter at least four characters'; } });

Validierungsregeln für das Senden werden verschoben, bis das Formular gesendet wird:

$('#name').addSubmitValidation(function(el){ el.isValid = el.value !== 'Dave'; if (!el.isValid) { el.errorMessage = 'Sorry Dave, you're not allowed'; } });

Erlauben Sie Personen, Fehler zu machen: Dieses E-Mail-Feld zeigt mir eine Fehlermeldung an, bevor Informationen eingegeben werden

Erlauben Sie Personen, Fehler zu machen: Dieses E-Mail-Feld zeigt mir eine Fehlermeldung an, bevor Informationen eingegeben werden

Die Ajax-Validierung bietet eine einfache Möglichkeit, sich an die Servervalidierung anzuschließen. In der einfachsten Form können Regeln nur mit dem Pfad zum Dienst hinzugefügt werden:

$('#postcode').addServerValidation({ path: 'validation.svc/IsValidPostcode?postcode=' });

Der aufgerufene Dienst muss ein JSON-Objekt mit der Fehlermeldung (leere Zeichenfolge kennzeichnet keinen Fehler) und der ID des aufrufenden Felds zurücksenden:

validationResponse { message: '',//all clear caller: 'postcode' }

Internationalisierung

Die länderspezifischen Teile von Quaid JS werden für jede Region in separate Dateien eingeschlossen. Geben Sie einfach den Gebietsschema-Code ein, der für eine sofortige Internationalisierung erforderlich ist:

Australisch:

isPostCode: function (p) { return /^d{4}$/.test(p); }, ... postcode: 'Postcode entered is not valid e.g. 3000',

Kanadisch:

isPostCode: function (p) { return /^[abceghjklmnprstvxyABCEGHJKLMNPRSTVXY][0-9][abceghjklmnprstvwxyzABCEGHJKLMNPRSTVWXYZ]s{0,1}[0-9][abceghjklmnprstvwxyzABCEGHJKLMNPRSTVWXYZ][0-9]$/.test(p); }, ... postcode: 'Postal code entered is not valid e.g. A9A 9A9',

Styling

Das Gestalten von Formularen ist größtenteils unkompliziert, da Browser Steuerelemente in Ihrem Namen rendern. Es gibt jedoch einige bemerkenswerte Tricks. Standardmäßig sind schreibgeschützte Felder nicht von normalen Feldern zu unterscheiden. Dies ist leicht zu beheben:

input[readonly], textarea[readonly] { background-color: #ddd; border-color: transparent; }

Platzhalter sind besonders nützlich, um Benutzern einen Hinweis auf festgelegte Muster zu geben

Platzhalter sind besonders nützlich, um Benutzern einen Hinweis auf festgelegte Muster zu geben

Die Positionierung des Etiketts ist wichtig, um zu zeigen, was ein Feld enthalten soll. Obwohl es Argumente für die Ausrichtung nach links, rechts und vertikal gibt, bevorzuge ich die vertikale Ausrichtung nachdrücklich, wenn auch nur aus mobilfreundlicher Sicht. Der einfachste Weg, dies zu erreichen, besteht darin, die Anzeigeeigenschaft der Beschriftungselemente zu ändern:

label { display: block; }

Damit endet dieses Tutorial - ich hoffe, es bietet eine hilfreiche Anleitung zum Erstellen klarerer, benutzerfreundlicherer HTML5-Formulare.

Wörter: Chris Lienert

Dieser Artikel erschien ursprünglich in .net Magazin Ausgabe 239

Mochte dies? Lese das!

Irgendwelche Fragen? Fragen Sie in den Kommentaren!