Form Validation UX in HTML and CSS

Mit HTML-Attributen können Sie eine beeindruckende Menge an Formularvalidierungen durchführen. Mit CSS-Selektoren können Sie die Benutzererfahrung ziemlich sauber und klar gestalten. Aber es erfordert etwas CSS-Trickser, um alles richtig hinzubekommen!

(Sie können) das Label wie einen Platzhalter aussehen lassen

Zuerst: Verwenden Sie immer echte <label for="correct_input"></label>-Elemente. Allein das ist schon ein UX-Gesichtspunkt, den zu viele Formulare vernachlässigen. Platzhalter sind Vorschläge für gültige Eingaben, wie z. B. "Tulsa" in ein Feld "Stadt" einzugeben.

Ich würde sagen, wenn das Formular kurz ist und ein offensichtliches Muster hat (wie An- oder Abmeldung), könnten Sie das visuelle Platzhaltermuster verwenden, aber stattdessen echte Labels.

Nehmen wir ein Formular wie…

<form action="#0" method="post">

  <div>
    <input type="text" id="first_name" name="first_name">
    <label for="first_name">First Name</label>
  </div>

  <!-- ... --->

</form>

Sie verwenden die <div>

form {
  max-width: 450px;
  
  // positioning context
  > div {
    position: relative;

    // Looks like placeholder
    > label {
      opacity: 0.3;
      position: absolute;
      top: 22px;
      left: 20px;
    }
  }
}

Sie müssen keine kniffligen Cursor-Sachen machen, weil es bereits semantisch verdrahtet ist. Wenn sie auf den vom Label eingenommenen Bereich klicken, wird die Eingabe aktiviert. Wenn sie auf die Eingabe klicken, wird die Eingabe aktiviert. Beides richtig.

Der Trick ist, die Eingabe *zuerst* zu setzen (semantisch in Ordnung), damit Sie das Label beim Fokus ausblenden können

form {
  
  /* ... */

  > div {
    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {

      &:focus {
        & + label {
          opacity: 0;
        }
      }

    }
  }
}

Bestimmte Eingaben als erforderlich kennzeichnen

Die vielleicht einfachste Validierung eines Formulars, die Sie durchführen können, ist die Verwendung des required-Attributs, um ein Feld als erforderlich zu markieren. Kein schnellerer Weg, einen Fehler zu erkennen, als den Browser es tun zu lassen, wenn er kann!

<input
  required 
  type="text" 
  id="first_name"
  name="first_name">

Gültige Eingabewerte positiv anzeigen

Benutzer darüber informieren, dass ein Feld korrekt eingegeben wurde. Der Browser kann uns diese Information über den CSS-Selektor :valid zur Verfügung stellen.

form {

    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
      
      // show success!
      &:valid {
        background: url(images/check.svg);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 20px 20px;

        // continue to hide the label
        & + label {
          opacity: 0;
        }
      }
    }
  }
}

:valid stellt in diesem Fall sicher, dass die erforderliche Bedingung erfüllt ist, aber dieser Selektor ist auch nützlich für die Validierung des Eingabetyps.

Hinweise zur Typvalidierung anzeigen

Sie können auch verlangen, dass der Wert einer Eingabe einem bestimmten Typ entspricht, z. B. email oder number. Hier sind Beispiele für alle.

<input id="email" name="email" required="" type="email">

Diese Eingabe ist sowohl erforderlich als auch muss dem gültigen E-Mail-Adressformat entsprechen. Machen wir das für die UX

1. Informieren Sie den Benutzer bei Fokus auf das Feld über die Anforderungen
2. Erinnern Sie ihn daran, dass das Feld andernfalls keinen gültigen Wert hat

Aber auch… zeigen Sie keine Hinweise an, wenn die Eingabe leer ist. Das heißt, nehmen Sie keinen ungültigen Zustand an. Das ist einfach nur ärgerlich und unnötig negativ. Um das zu tun, müssen wir wissen, ob die Eingabe leer ist oder nicht.

Untertrick! Testen, ob eine Eingabe einen Wert hat oder nicht

Wir möchten Dinge mit :valid und :invalid tun, aber wir möchten nicht zu voreilig mit :invalid sein und es verwenden, bevor die Eingabe einen Wert hat.

Gibt es einen CSS-Selektor, um zu testen, ob eine Eingabe leer ist? Nicht wirklich! Man sollte denken, :empty wäre es, aber das ist es nicht. Das gilt für Dinge wie </code>

</code>… Container-Elemente, die nichts darin enthalten. Eingaben sind bereits Elemente ohne Inhalt.

Der Trick besteht darin, sicherzustellen, dass die Eingabe einen Platzhalterwert hat, und dann

input:not(:placeholder-shown) {

}

Wir verwenden den Platzhalter in unserer Demo nicht wirklich, aber ein Leerzeichen funktioniert

<input type="text" placeholder=" ">

:placeholder-shown ist hier super nützlich für uns! Es ist im Grunde der geheime Selektor, um zu testen, ob eine Eingabe derzeit einen Wert hat oder nicht.

Es gibt keine IE- oder Firefox-Unterstützung dafür, was besonders schwierig zu umgehen ist. Mit neuen Funktionen wie dieser ist @supports normalerweise eine Rettung, aber…

/* This doesn't work */
@supports (input:placeholder-shown) {
  input:not(:placeholder-shown) {
  }
}

Sie können @supports nicht für Selektoren verwenden, nur für Eigenschaften/Werte (z. B. @supports (display: flex))

Das Testen der Platzhalterunterstützung in JavaScript ist einfach genug

var i = document.createElement('input');
if ('placeholder' in i) {

}

Aber es scheint keinen einfachen Weg zu geben, :placeholder-shown zu testen. Also… das muss vielleicht einfach auf tiefere Browserunterstützung warten, um es für große Produktionssachen zu verwenden.

---

Unter der Annahme wunderbarer Unterstützung würde die Logik so aussehen…

form {

  > div {
    
    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
     
      // When input is...
      //   1. NOT empty
      //   2. NOT in focus
      //   3. NOT valid
      &:invalid:not(:focus):not(:placeholder-shown) {
        // Show a light reminder
        background: pink;
        & + label {
          opacity: 0;
        }
      }
      
      // When that invalid input becomes in focus (and also still isn't empty)
      &:invalid:focus:not(:placeholder-shown) {
        // Show the more robust requirement instructions below.
        & ~ .requirements {
          max-height: 200px;
          padding: 0 30px 20px 50px;
        }
      }
      
    }
    
    // <input> ~
    // <label> ~ 
    // <div class="requirements">
    .requirements {
      padding: 0 30px 0 50px;
      color: #999;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      color: red;
      font-style: italic;
    }

  }
}

Sie können robuste Validierungen erstellen

Es ist nicht nur required oder type="email" (und ähnliches), Sie können auch clientseitig Dinge wie die Länge (z. B. minimale Passwortlänge oder maximale Zeichen in einer Bio-Textarea) validieren und sogar vollwertige Regex verwenden.

Hier ist ein Artikel dazu. Sagen wir, Sie möchten Passwortanforderungen wie

• Mindestens 6 Zeichen
• Mindestens 1 Großbuchstabe
• Mindestens 1 Kleinbuchstabe
• Mindestens 1 Zahl

Das können Sie so tun

<input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password" id="password" name="password" required placeholder=" ">

Demo

Ich lasse die :placeholder-shown-Sachen hier drin, was das in Firefox und IE nicht gut funktionieren lässt völlig in Ordnung macht, weil es jetzt unterstützt wird, außer IE 11.

Mehr

• Mihael Konjević: Inline-Validierung in Formularen – Gestaltung der Erfahrung
• Datalists für verschiedene Eingabetypen
• Almanach – :required, :valid, :invalid, :placeholder, :placeholder-shown