Display Form <progress>

Stellen Sie sich ein Formular mit 10 Pflichtfeldern vor. Das ist etwas größer als ein durchschnittliches Formular im Internet und bedeutet für einen Nutzer eine Menge Arbeit. Möglicherweise verlieren Sie auf dem Weg einige Nutzer, was nie gut ist. Um die Fertigstellung des Formulars zu fördern, könnten Sie den Nutzern mitteilen, wie nah sie der Vollendung sind, und ihnen motivierende Nachrichten anzeigen.

1. HTML für Pflichtfelder

Die Eingabefelder müssten für diese Demo nicht unbedingt required sein, aber es macht die Demo übersichtlicher. Das Ausfüllen eines optionalen Feldes bringt Sie den Mindestanforderungen für das Absenden eines Formulars nicht näher. Für diese Demo haben wir also 5 Pflichtfelder in einem typischen Formular, das Zahlungsinformationen sammelt.

<form id="payment-form" action="#">
  
   <label for="name">Full Name</label>
   <input required id="name" name="name">

   <!-- etc -->

</form>

2. HTML für Fortschritt

Es gibt ein HTML-Element speziell zur visuellen Darstellung des Fortschritts. Wörtlich: <progress>. Lassen Sie uns eines davon verfügbar machen (mit einer ID, damit es mit JavaScript leicht ansprechbar ist). Platzieren Sie es, wo immer Sie möchten.

<progress max="100" value="0" id="progress"></progress>

Die Einstellung des max-Attributs auf 100 vereinfacht die Mathematik. Der Fortschrittsbalken ist so voll wie der Wert in Prozent. Z. B. entspricht value="20" einem zu 20 % gefüllten Balken.

3. Auf Änderungen achten

Wir verwenden hier jQuery, um die Ereignisbindung und Elementauswahl zu vereinfachen. Alle unsere Eingabefelder sind hier textbasiert, was Tastaturereignisse relevant macht. Also...

$("#payment-form input").keyup(function() {
  
  // calculate progress

});

4. Anzahl der gültigen Eingaben zählen

Ob ein bestimmtes Eingabefeld in seinem aktuellen Zustand gültig ist oder nicht, ist nun Teil des DOM. Sobald wir einen Verweis darauf haben, prüfen wir einfach this.validity.valid auf true oder false.

var numValid = 0;
$("#payment-form input[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

5. Fortschrittsbalken anpassen / Nachrichten anzeigen

Jetzt, da wir eine Ganzzahl haben, wie viele Eingaben gültig sind, richten wir einfach eine grundlegende Logik ein, um den aktuellen Wert des Fortschrittsbalkens anzupassen.

Hier könnten wir auch unsere motivierenden Nachrichten anzeigen. Vielleicht gibt es irgendwo auf der Seite ein <p>-Element, auf das wir einen Verweis haben (progressMessage), und wir passen einfach den Text darin an, um den Fortschritt widerzuspiegeln.

// "Cached" somewhere once
var progress = $("#progress"),
    progressMessage = $("#progressMessage");

// Logic that runs after counting every time
if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}

Browser-Unterstützung

Wenn die Browserunterstützung ein Anliegen ist, möchten Sie wahrscheinlich zuerst einen kleinen Modernizr-Test durchführen. Wenn er bestanden wird, laden Sie Skripte, fügen Sie Elemente ein, wie auch immer Sie es handhaben möchten.

if (Modernizr.input.required) {

  // Modernizr.load, inject elements, whatever.

}

Wenn Sie weitere Hilfe dazu benötigen, lesen Sie diesen Artikel.

Demo auf CodePen

Machen Sie damit, was immer Sie möchten damit.