Neue HTML5 / CSS3 Tricks für die Validierung

HTML5 und CSS3 fügen noch ein paar Tricks Validierung zu vereinfachen, und sie sind absolut wunderbar. Während Sie immer javascript und reguläre Ausdrücke verwenden, können Sie Ihre Seiten zu validieren, verspricht HTML5 eine viel einfachere Lösung. Wenn Sie die Spezialeingabeelemente verwenden, wird der Browser automatisch das Formularfeld überprüfen, um sicherzustellen, dass es in ein geeignetes Format ist.

Wenn der Eintrag nicht gültig ist, wird die Form (im Allgemeinen) nicht vorlegen, und die besondere :ungültig CSS Pseudo-Klasse wird mit dem ungültigen Feld zugeordnet werden. Einfach liefern CSS zu Ihrer Seite die Handhabung :ungültig Bundesland:

 : Invalid {background-color: rot-}

Wenn dieser CSS-Zustand aktiv ist, werden alle ungültigen Felder haben die :ungültig Styling. Zum Beispiel, wenn Sie eine haben Email Feld definiert und der Inhalt dieses Feldes ist keine gültige E-Mail-Adresse, die ungültig Stil wird angewendet. Sobald die Adresse in das richtige Format, das ungültig Stil wird entfernt.

Der Entwickler benötigt keine anderen Code in das Formular hinzuzufügen. Einfach CSS hinzufügen ungültige Einträge anzuzeigen, und der Browser den Rest tun. Sie brauchen nicht einmal den regulären Ausdruck für E-Mail-Adressen oder andere Spezialeingabefelder zu spezifizieren - die entsprechende regulären Ausdruck für jeden Feldtyp ist bereits eingebaut.

Beachten Sie, dass, wenn ein Feld erforderlich ist (mit der erforderlich Attribut), wird es als ungültig betrachtet, bis er einen Wert enthält.

Es ist möglich, dass der Browser ein Formular zu verarbeiten verweigern, bis alle Felder validiert werden, aber dieses Verhalten scheint noch nicht unter HTML5-kompatiblen Browsern universell zu sein.

Wenn Sie möchten, können Sie die Validierung für jedes Feld, indem es das Ausschalten novalidate Attribut auf dieses Element.

Wie ein Muster hinzufügen

Das Muster Attribut können Sie einen regulären Ausdruck angeben, verwendet, um die Form zu überprüfen. Wenn der Inhalt des regulären Ausdruck übereinstimmt, wird das Feld als gültig betrachtet. Das Muster Attribut sollte nur werden, wenn die Standardvalidierungstechniken nicht ausreichend sind (das heißt, Sie sind ein gewöhnliches Eingabeelement verwenden, das nicht über eine automatische Muster hat), weil es schwierig sein kann, reguläre Ausdrücke zu debuggen.

Wenn Sie ein Muster angeben, sollten Sie auch eine umfassen Titel Attribut. Der Titel sollte zeigen, was das Muster ist. Der Browser kann für den Benutzer dies als eine Spitze verwenden. Es kann auch nützlich sein Musterinformation als Platzhalter Text hinzufügen.

Wie ein Feld zu markieren, je nach Bedarf

Das erforderlich Attribut können Sie ein bestimmtes Feld angeben, wie erforderlich. Unterstützung Browser werden alle erforderlichen Felder markieren (vielleicht von ihnen in rot hervorgehoben), wenn sie in nicht gefüllt sind. Einige Browser auch eine Warnung senden, wenn der Benutzer ein Formular mit leeren erforderlichen Felder vorlegen will.

Das Sonderangebot :erforderlich Pseudo-Klasse ermöglicht es Ihnen, einen CSS-Stil für alle erforderlichen Elemente in Ihrem Formular zu beantragen (sie einen Rahmen oder Hintergrund-Farbe, zum Beispiel zu geben). Hier ist ein Beispiel für einen CSS-Stil für die Kennzeichnung erforderlichen Elemente mit einem roten Rand:

 : Erforderlich {border: 1px solid rot-}

Wenn Sie ein erforderliches Feld haben und es keinen Inhalt hat, löst das Feld der ungültig Stil.

Wie Platzhalter-Text hinzufügen

Das Platzhalter Attribut können Sie spezielle Platzhalter-Wert in Ihre Textfelder hinzuzufügen. Diese Platzhalter fungiert als temporäres Etikett den Zweck des Feldes zeigt, ohne ein Label-Tag erfordert. Sobald der Benutzer das Feld aktiviert, verschwindet der Platzhalter-Text.

Nicht alle Browser unterstützen Platzhalter-Text. Andere Browser werden einfach ignorieren die Platzhalter Attribut. Ebenso, wenn das Feld bereits ausgefüllt ist, wird der Platzhalter nicht sichtbar sein. Aus diesen Gründen ist es noch bevorzugt, ein Etikett hinzufügen, damit Benutzer wissen, was in jedem Textbereich eingeben. Platzhalter Text ist besonders hilfreich, wenn es verwendet wird, um anzuzeigen, wie die Eingangs formatiert werden soll.