Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Textfeld“.
Zuletzt aktualisiert am
1. Mai 2021
Hinweis:
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
Widget „Überprüfung - Textfeld“
Mit einem Spry-Widget vom Typ „Überprüfung - Textfeld“ werden Gültig- bzw. Ungültig-Zustände bei der Eingabe von Text durch den Site-Besucher angezeigt. So können Sie beispielsweise ein solches Widget zu einem Formular hinzufügen, in dem die Besucher ihre E-Mail-Adressen eingeben müssen. Wenn dabei das @-Symbol und ein Punkt der Adresse nicht angegeben wird, gibt das Widget eine Meldung über eine ungültige Benutzereingabe aus.
Das folgende Beispiel zeigt das Widget „Überprüfung - Textfeld“ in verschiedenen Zuständen:
A. Textfeld-Widget mit aktivierter Eingabehilfe B. Textfeld-Widget, gültiger Zustand C. Textfeld-Widget, ungültiger Zustand D. Textfeld-Widget, erforderlicher Zustand
Das Widget „Überprüfung - Textfeld“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich usw.). Sie können die Eigenschaften für diese Zustände, je nach dem gewünschten Überprüfungsergebnis, mit dem Eigenschafteninspektor anpassen. Mit einem Widget Überprüfung - Textfeld lassen sich unterschiedliche Aspekte überprüfen, z. B. wenn der Besucher außerhalb des Widgets klickt, bei der Eingabe von Text oder beim Abschicken des Formulars.
Anfangszustand
Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.
Zustand „Fokus“
Der Widget-Zustand, in dem der Besucher im Widget einen Einfügepunkt setzt.
Zustand „Gültig“
Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular abgeschickt werden kann.
Zustand „Ungültig“
Der Widget-Zustand, in dem der Besucher Text in einem ungültigen Format eingegeben hat. (Zum Beispiel die Jahresangabe 06 anstatt 2006).
Erforderlich-Zustand
Der Widget-Zustand, in dem der Besucher nicht den erforderlichen Text in ein Feld eingegeben hat.
Zustand „Zeichen min.“
Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl in ein Textfeld eingegeben hat.
Zeichen max.-Zustand
Der Widget-Zustand, in dem der Besucher mehr Zeichen als die Höchstanzahl in ein Textfeld eingegeben hat.
Mindestwert-Zustand
Der Widget-Zustand, in dem der Besucher eine Angabe gemacht hat, die unter dem Mindestwert des Textfelds liegt. (gilt für Überprüfungen von Ganzzahlen, reellen Zahlen und Daten)
Höchstwert-Zustand
Der Widget-Zustand, in dem der Besucher eine Angabe gemacht hat, die über dem Höchstwert des Textfelds liegt. (gilt für Überprüfungen von Ganzzahlen, reellen Zahlen und Daten)
Wenn ein Widget „Überprüfung - Textfeld“ durch eine Benutzeraktion in einen dieser Zustände versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber nicht alle Pflichtfelder ausgefüllt hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Es muss ein Wert angegeben werden“ führt. Die Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier „SpryValidationTextField.css“, enthalten.
Das Standard-HTML für das Widget „Überprüfung - Textfeld“, normalerweise in einem Formular, enthält ein <span>-Container-Tag, das das <input>-Tag des Textfelds umgibt. Das HTML für das Widget „Überprüfung - Textfeld“ enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.
Eine ausführliche Erläuterung zur Funktionsweise von Widgets vom Typ „Überprüfung - Textfeld“, einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytextfield_de.
Widget „Überprüfung - Textfeld“ einfügen und bearbeiten
Widget „Überprüfung - Textfeld“ einfügen
-
-
Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Hinweis:
Sie können Widgets vom Typ „Überprüfung - Textfeld“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Typ und Format für Überprüfung festlegen
Für das Widget „Überprüfung - Textfeld“ können Sie verschiedene Überprüfungstypen festlegen. So können Sie beispielsweise eine Überprüfung für Kreditkarten einfügen, wenn das Textfeld die Eingabe einer Kreditkartennummer erfordert.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Wählen Sie im Menü „Typ“ des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) einen Überprüfungstyp aus.
-
Wählen Sie ggf. eine Formatierungsoption aus dem Popupmenü „Format“.
Bei den meisten Überprüfungstypen wird für das Textfeld die Standard-Formatoption eingestellt. Wenn Sie beispielsweise den Überprüfungstyp „Ganzzahl“ auf ein Textfeld anwenden, erfolgt die Überprüfung erst bei der Eingabe von Zahlen. Bei manchen Überprüfungstypen können Sie allerdings ein Format für das Textfeld wählen. In der folgenden Tabelle sind die über den Eigenschafteninspektor verfügbare Überprüfungstypen und Formate aufgelistet:
Überprüfungstyp | Format |
|---|---|
Keine | Kein bestimmtes Format erforderlich. |
Ganzzahl | Das Textfeld akzeptiert nur Zahlen. |
E-Mail-Adresse | Das Textfeld akzeptiert E-Mail-Adressen mit dem @-Symbol und einem Punkt (.), dem mindestens ein Buchstabe vorausgehen bzw. folgen muss. |
Datum | Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des Eigenschafteninspektors. |
Uhrzeit | Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des Eigenschafteninspektors. („tt“ steht für das 12- und „t“ für das 24-Std.-Format) |
Kreditkarte | Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des Eigenschafteninspektors. Sie können entweder alle Kreditkarten zulassen oder eine bestimmte Art von Kreditkarten (MasterCard, Visa usw.) vorschreiben. Das Textfeld erlaubt bei Kreditkartennummern keine Leerschritte (z. B. 4321 3456 4567 4567). |
PLZ | Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des Eigenschafteninspektors. |
Telefonnummer | Es können Telefonnummern im Format (000) 000-0000 (USA und Kanada) oder in benutzerdefinierten Formaten eingegeben werden. Wenn Sie die Option „Benutzerdefiniertes Muster“ auswählen, geben Sie im Textfeld „Muster“ ein Format ein, z. B. 000.00(00). |
US-Sozialversicherungsnummer | Im Textfeld können Sozialversicherungsnummern im Format 000-00-0000 eingegeben werden. Wenn Sie ein anderes Format verwenden möchten, wählen Sie den Überprüfungstyp „Benutzerdefiniert“ aus und geben Sie das gewünschte Format ein. Bei der Überprüfung des Formatmusters werden nur ASCII-Zeichen unterstützt. |
Währung | Es werden Währungen im Format 1,000,000.00 oder 1.000.000,00 akzeptiert. |
Reelle Zahl/Exponentialschreibweise | Zur Überprüfung verschiedener Zahlentypen: Ganzzahlen (z. B. 1); Fließwerte (z. B. 12.123) und Fließwerte aus der Exponentialschreibweise (z. B. 1.212e+12, 1.221e-12 wobei e als 10er-Potenz verwendet wird). |
IP-Adresse | Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des Eigenschafteninspektors. |
URL | Es werden URLs im Format http://xxx.xxx.xxx oder ftp://xxx.xxx.xxx akzeptiert. |
Benutzerdefiniert | ermöglicht die Angabe eines benutzerdefinierten Überprüfungstyps und -formats. Geben Sie im Eigenschafteninspektor das Formatmuster (ggf. mit Eingabehinweis) ein. Bei der Überprüfung des Formatmusters werden nur ASCII-Zeichen unterstützt. |
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann die Überprüfung erfolgt, z. B. wenn der Benutzer auf eine Stelle außerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur
Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds klickt.
Ändern
Überprüfung erfolgt, wenn der Benutzer Text im Feld ändert.
OnSubmit
Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist standardmäßig ausgewählt und kann nicht deaktiviert werden.
Minimale und maximale Zeichenanzahl festlegen
Diese Option ist lediglich für die Überprüfungstypen „Keine“, „Ganzzahl“, „E-Mail-Adresse“ und „URL“ verfügbar.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl ins Feld „Zeichen min.“ bzw. „Zeichen max.“ ein. Wenn Sie beispielsweise unter „Zeichen min.“ eine 3 eingeben, erfolgt nur dann eine Überprüfung, wenn der Benutzer drei oder mehr Zeichen eingibt.
Minimal- und Maximalwerte festlegen
Diese Option ist lediglich für die Überprüfungstypen „Ganzzahl“, „Uhrzeit“, „Währung“ und „Reelle Zahl/Exponentialschreibweise“ verfügbar.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl ins Feld „Mindestwert“ bzw. „Höchstwert“ ein. Wenn Sie beispielsweise im Feld „Mindestwert“ eine 3 eingeben, erfolgt nur dann eine Überprüfung, wenn der Benutzer die Zahl 3 oder einen höheren Wert (4, 5, 6 usw.) eingibt.
Widgetstatus in der Entwurfsansicht anzeigen
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü „Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen möchten, wählen Sie die Option „Gültig“.
Erforderlichen Status eines Textfelds ändern
Alle Widgets vom Typ „Überprüfung - Textfeld“, die Sie mit Dreamweaver eingeben, erfordern bei der Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können das Ausfüllen von Textfeldern allerdings auch als optional konfigurieren.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das Kontrollkästchen „Erforderlich“.
Tipps für Textfelder erstellen
Da es sehr viele Formattypen für Textfelder gibt, sollte man dem Benutzer vielleicht einen Tipp geben, welches Format er eingeben muss. So können in ein Textfeld mit dem Überprüfungstyp „Telefonnummer“ beispielsweise nur Telefonnummern im Format (000) 000-0000 eingegeben werden. Sie können dieses Zahlenbeispiel als Tipp eingeben, damit das Textfeld beim Laden der Seite in den Browser das korrekte Format anzeigt.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Textfeld „Tipp“ einen Tipp ein.
Ungültige Zeichen sperren
Sie können verhindern, dass Benutzer ungültige Zeichen in ein Widget vom Typ „Überprüfung - Textfeld“ eingeben. Wenn Sie diese Option beispielsweise für ein Widget mit dem Überprüfungstyp „Ganzzahl“ auswählen, können nur ganze Zahlen eingegeben werden.
-
Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Muster erzwingen“ aus.
Widget „Überprüfung - Textfeld“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem solchen Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Datei für das Widget ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprytextfield_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationTextField.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Textfeld“ erstellen, speichert Dreamweaver die Datei „SpryValidationTextField.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Hinweis:
Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Fehlermeldungs-Textstil für das Widget „Überprüfung - Textfeld“
Fehlermeldungen für das Widget „Überprüfung - Textfeld“ werden in Rot mit einem 1 Pixel breiten Rahmen um den Text angezeigt.
-
Um den Textstil für Fehlermeldungen des Widgets zu ändern, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu:
Zu ändernder Text
Relevante CSS-Regel
Relevante zu ändernde Eigenschaften
Text der Fehlermeldung
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Hintergrundfarben des Widgets „Überprüfung - Textfeld“ ändern
-
Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Textfeld“ zu ändern, suchen Sie in folgender Tabelle die richtige CSS-Datei und ändern Sie die Standardwerte:
Zu ändernde Farbe
Relevante CSS-Regel
Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im gültigen Zustand
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im ungültigen Zustand
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
Hintergrundfarbe des Widgets, wenn es den Fokus hat
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
