Verstehen, was HTML5-Formularvalidierung und Floating-Input-Label sind

Die Implementierung der Formularvalidierung spielt eine entscheidende Rolle, um zu verhindern, dass böswillige Benutzer Kauderwelsch-Text in die Formularfelder eingeben. Außerdem verhindert es, dass unerfahrene Benutzer versehentlich falsche Informationen in das Formular eingeben.

Natürlich möchten Sie nicht auf unsichere Weise falsche Daten von Benutzern sammeln. Daher ist es zwingend erforderlich, dass Sie Validierungsregeln für Formulare definieren.

Seit Jahren verwenden wir den komplexen und TL;DR (dh zu lang; nicht gelesen) JavaScript-Code, um die Formularvalidierung auf der Clientseite zu implementieren. Glücklicherweise können wir mit der Veröffentlichung von „HTML5-Formularvalidierung” jetzt Validierungen zu einem Formular mit minimalem JavaScript hinzufügen.

Während die neueste HTML-Version mehrere Vorteile bietet, ist der wichtigste jedoch, dass sie mit vielen neuen Eingabefeldern und Attributen geliefert wird, die für die Validierung eines Formulars unerlässlich sind, ohne dass komplizierter JS-Validierungscode (kurz für JavaScript) geschrieben werden muss.

Denken Sie jedoch daran, dass Benutzer beim Ausfüllen eines Formulars leicht frustriert werden können, insbesondere wenn sie erfahren, dass die von ihnen eingegebenen Daten falsch waren, kann ihre Frustration noch größer werden. Aber dank HTML5 können durch das Hinzufügen von Floating-Input-Labels die Formulardaten gleichzeitig validiert werden, wenn Benutzer das Formular ausfüllen. Auf diese Weise wissen Benutzer sofort, falls sie Fehler in den Eingabefeldern machen.

Unten sehen Sie beispielsweise ein Bild, das von Matt Smith auf Dribble gepostet wurde und das zeigt, wie das Floating-Label-Muster funktioniert, wenn es auf ein Formular angewendet wird:

Dieser Beitrag behandelt, wie Sie Floating-Eingabebezeichnungen implementieren können, wenn Sie Validierungen zu einem HTML5-Formular hinzufügen.

Aber bevor Sie beginnen

Die meisten von Ihnen möchten vielleicht zuerst wissen, wie ein HTML5-Formular validiert wird. Schließlich haben vielleicht nicht alle von Ihnen Erfahrung mit dem Schreiben von Validierungscode für ein HTML5-Formular. Möglicherweise haben Sie auch keine Kenntnisse über die neu eingeführten Eingabefelder und Attribute in HTML5.

Ein detaillierter Überblick über die Validierung von HTML5-Formularen

Wenn Sie planen, ein Formular zu validieren, sollten Sie zuerst mit der serverseitigen Validierung beginnen. Und falls Sie ein guter Webdesigner sind, fügen Sie eine clientseitige Validierung hinzu, die Ihren Benutzern hilft, sofortiges Feedback zu erhalten, ob sie das Formular mit den richtigen Daten ausfüllen oder nicht. Wenn Sie beispielsweise Benutzern sofort Feedback geben, wenn sie Daten in das E-Mail-Adressfeld eingeben, werden sie wissen, dass die von ihnen eingegebene E-Mail-Adresse gültig war.

Eine der großartigen Funktionen von HTML5 ist, dass es hilft, die clientseitige Validierung zu implementieren, ohne von den Skripten abhängig zu sein. Stattdessen können Sie eine solche Aufgabe ausführen, indem Sie „Validierungsattribute” für Ihre Formularelemente verwenden. Am wichtigsten ist, dass Sie nur das „erforderliche” Attribut für ein Eingabefeld hinzufügen müssen, während der Rest von Ihrem Browser erledigt wird.

Hier ist ein Beispiel, das die Verwendung des erforderlichen Attributs zum Hinzufügen einer Validierung zu einem Eingabefeld erläutert:

Name: <input type="text" name="yourname" required>

Die obige Codezeile weist Ihren Browser darauf hin, dass das INPUT-Feld für den Namen als Pflichtfeld zu betrachten ist (dh es darf nicht leer gelassen werden).

Wie Sie sehen können, wird im Textfeld, das dem Eingabefeld „Ihr Name” entspricht, eine rote Markierung angezeigt. Sobald jedoch Text in das Namenseingabefeld eingegeben wird, verwandelt sich die Markierung in ein Häkchen, das anzeigt, dass der eingegebene Wert gültig ist.

Abgesehen von <input type="text">(d. h. den Texteingabetypen) unterstützt HTML5 jetzt mehrere neue Eingabeoptionen wie Suche, E-Mail, Tel, Datum, Uhrzeit usw. Mit einfachen Worten, mit HTML5 können wir die folgende Codezeile schreiben:

<input type="text" name="email">

in etwas wie:

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

Desktop-Browser rendern den obigen Code wie jedes Standard-Textfeld.

Eine weitere wichtige Sache, die ich Ihnen mitteilen möchte, ist Folgendes: Wenn Sie versuchen, die Attribute wie erforderlich oder Eingabetyp = „E-Mail” in der CodePen-Demo auch ohne Inhalt einzugeben, erhalten Sie immer noch eine Fehlermeldung Nachricht beim Klicken auf die Schaltfläche „SENDEN” ohne gültige E-Mail-Adresse:

In dem oben besprochenen Beispiel können Sie sehen, dass der Browser standardmäßig eine Fehlermeldung anzeigt. Was aber, wenn Sie Ihre eigene (dh benutzerdefinierte) Validierungsregel auf den Eingabewert anwenden möchten? Hier kommt das Regex-Muster ins Spiel.

Grundlegendes zu RegEx-Mustern

Möglicherweise sind Ihnen bei der Eingabe einer E-Mail-Adresse wie abc@a Muster aufgefallen. Natürlich möchten Sie, dass Ihre Benutzer eine echte E-Mail-Adresse eingeben. Und indem Sie Ihre eigene Auswahl an Mustern angeben, die mit Ihren Daten übereinstimmen, können Sie den eingegebenen Wert validieren. Sie können beispielsweise sicherstellen, dass die E-Mail dem Muster entspricht, das am Ende drei oder mehr Zeichen enthält. Dazu müssen Sie „Musterattribut” und reguläre Ausdrücke (RegEx) verwenden.

RegEx ist im Grunde eine Sprache, die verwendet wird, um den Text zu analysieren oder zu manipulieren. Am häufigsten werden reguläre Ausdrücke verwendet, um komplexe Operationen (wie Suchen und Ersetzen) zur besseren Bildung der Textdaten durchzuführen. Heutzutage findet man die Verwendung von regulären Ausdrücken in fast allen Programmier- und Skriptsprachen. RegEx kann zum Validieren der in die Formularfelder eingegebenen Daten verwendet werden, indem sie wie folgt für Eingabetypen erzwungen werden, die das Musterattribut verwenden:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Wenn Validierungsfehler auftreten, können Sie außerdem ein Titelattribut zusammen mit dem Validierungsfehler bestimmen, um eine Meldung neben „Falsches Format!” Auszugeben. mit der unten angegebenen Codezeile:

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Denken Sie daran, dass Sie nicht für jede einzelne Eingabe irgendwelche absurden Muster schreiben müssen. Stattdessen müssen Sie in vielen Fällen nur einem bestimmten Datentyp das erforderliche Attribut zuweisen. Zum Beispiel sieht eine Zahl über 8 so aus:

<input type="number" min="8" required>

Denken Sie auch daran, dass nicht alle Browser alle verfügbaren Validierungsattribute unterstützen. Nehmen wir zum Beispiel, der Firefox-Browser ist nicht mit dem „Minlength”-Muster kompatibel.

Vorteile der Verwendung der HTML5-Formularvalidierung

Der größte Vorteil der Implementierung der HTML5-Formularvalidierung ist das sofortige Feedback. Meistens wird eine Art Hinweis hervorgehoben, während Benutzer ein Feld in einem Formular ausfüllen, um sie darüber zu informieren, ob der eingegebene Wert gültig war oder nicht.

Wenn Sie nun etwas in das Textfeld eingeben, ändert sich die Rahmenfarbe wie folgt in Grün:

Wie Sie sehen können, hat dieser Ansatz jedoch einen Nachteil. Selbst wenn ein ungültiger (oder unvollständiger) Wert im Feld „Vorname” hinzugefügt wird, erhält der Benutzer einen Hinweis darauf, dass der Wert korrekt ist. Vielleicht denken Sie darüber nach, etwas :invalid:not(:empty)in den Code einzufügen. Leider funktioniert eine solche Logik nicht mit den Browsern, da diese normalerweise Formularelemente als leer betrachten.

Sie fragen sich, was zu tun ist?

Sie können versuchen, den neuen Pseudo-Selektor namens „:placeholder-showd” wie folgt in den Code einzufügen:

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Aber die meisten Browser scheinen Platzhalter nicht zu unterstützen, daher ist es besser, wenn Sie ein Skript schreiben, um eine Klasse umzuschalten, wenn das Eingabefeld leer ist oder nicht. Hier ist der JavaScript-Code für dasselbe:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

HINWEIS: Denken Sie daran, das Platzhalterelement aus dem obigen HTML-Markup zu entfernen.

Wenn Sie nun das obige Code-Snippet zusammen mit HTML5-Markup ausführen, sieht die Ausgabe so aus:

Wie Sie sehen können, bleibt die Farbe des Textfelds rot, bis die auf das Feld angewendete Validierung nicht erfüllt ist. Und wenn Sie auf Senden klicken, wird eine Fehlermeldung angezeigt, wenn Sie einen unvollständigen Namen eingeben.

Sobald der Benutzer jedoch das vollständige (mehr als 3 Zeichen) eingibt, ändert sich die Farbe des Textfeldrahmens auf Grün.

Wie können Sie Floating Input Label in HTML5 hinzufügen?

Lassen Sie uns nun den Ansatz zum Hinzufügen von Floating-Eingabebeschriftungen bei der Validierung Ihres HTML5-Formulars besprechen. Dies trägt dazu bei, das Erscheinungsbild des Formulars zu verbessern. Hier ist das HTML-Markup.

Um das Float-Label-Muster zu implementieren, müssen Sie das Tag direkt unter das <input>Element in Ihrem HTML-Markup verschieben:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

CSS sieht in etwa so aus:

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

Und schließlich schreiben Sie den JavaScript-Code:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Ausgabe:

Sie können mehrere Effekte implementieren, wenn Sie Floating-Eingabelabels in HTML5 verwenden, wie zum Beispiel:

• Fügen Sie Symbole mit Ein-/Ausblendeffekt hinzu, während Sie ein HTML5-Formular validieren.
• Schütteln Sie die Eingabe, wenn die eingegebenen Daten ungültig sind.
• Machen Sie die Farbe der Eingaben dunkler, wenn sie korrekt ausgefüllt sind.

Dinge, die man beachten muss

Wenn Sie an der Implementierung von Validierungen in ein HTML5-Formular arbeiten, müssen Sie mit Folgendem vertraut sein:

1. Browserunterstützung: HTML5-Formulare funktionieren in den modernen Browsern und IE10+ perfekt. IE Version 9 und ältere Versionen unterstützen zwar keine Validierungs-Pseudoselektoren, die Sie davon abhalten, das Formular zu formatieren, aber es wird trotzdem korrekt funktionieren.
2. Vorbehalt: Eine Sache, die Sie beim Anwenden von Validierungen auf ein HTML5-Formular nicht ausführen können, ist das Gestalten der Validierungsmeldungen. Das liegt daran, dass solche Funktionen von Browsern deaktiviert werden.

Letzte Worte

Die Implementierung von Validierungen in ein Formular ist entscheidend, um Ihrer Website eine zusätzliche Sicherheitsebene hinzuzufügen. Dies liegt daran, dass schändliche Benutzer daran gehindert werden, bösartigen Text als Wert in Ihre Formularfelder einzufügen. Außerdem wird die Bereitstellung von sofortigem Feedback für Benutzer, wenn sie eine Eingabe in ein validiertes Eingabefeld des Formulars eingeben, dazu beitragen, ihre Erfahrung zu verbessern. Schließlich müssen sie keine Zeit damit verbringen, zu erkennen, dass sie beim Ausfüllen des Formulars einen Fehler gemacht haben. Aber die Validierung eines Formulars nur mit JavaScript kann eine Herausforderung sein. Hier kommt Ihnen die HTML5-Formularvalidierung zu Hilfe.

Wenn Sie mit HTML5 Validierungen auf ein Formular anwenden, müssen Sie keine langen Zeilen mit komplexem JS-Code schreiben. Stattdessen können Sie Formularvalidierungsregeln mit minimalem JavaScript-Code implementieren. Am wichtigsten ist, dass viele neue Funktionen mit der HTML5-Formularvalidierung verfügbar sind, wie z. B. schwebende Eingabebezeichnungen, die ein Formular großartig aussehen lassen und Benutzer dazu ermutigen, das Formular einzureichen.