Arbeta med widgeten Spry-validerat textfält

Obs!

Spry-widgetar ersätts med jQuery-widgetar i Dreamweaver CC och senare. Du kommer även fortsättningsvis att kunna ändra befintliga Spry-widgetar på din sida, men du kan inte lägga till nya.

Om widgeten Textfält för validering

Widgeten Spry-validerat textfält är ett textfält som visar giltiga eller ogiltiga lägen när besökaren skriver in text. Du kan t.ex. lägga till widgeten Textfält för validering i ett formulär där besökare skriver in sina e-postadresser. Om de inte skriver in symbolen ”@” och en punkt i e-postadressen returnerar widgeten ett meddelande med information om att det användaren har skrivit in är ogiltigt.

I följande exempel visas widgeten Textfält för validering i olika lägen:

Widgeten Textfält för validering

A. Widget för textfält, tips aktiverat B. Widget för textfält, giltigt läge C. Widget för textfält, ogiltigt läge D. Widget för textfält, obligatoriskt läge 

Widgeten Textfält för validering innehåller ett antal lägen (t.ex. giltig, ogiltig, obligatoriskt värde, osv.). Du kan ändra egenskaperna för dessa lägen med egenskapskontrollen, beroende på önskat valideringsresultat. Widgeten Textfält för validering kan validera vid flera tillfällen, t.ex. när besökare klickar utanför widgeten, när de skriver eller när de försöker skicka formuläret.

Ursprungligt läge

Widgetläget när sidan läses in i webbläsaren eller när användaren återställer formuläret.

Läget Fokus

Widgetläget när användaren placerar markören i widgeten.

Läget Giltig

Widgetläget när användaren har angivit information på rätt sätt och formuläret kan skickas.

Läget Ogiltig

Widgetläget när användaren har skrivit in text i ett ogiltigt format. (T.ex. 06 för ett år istället för 2006).

Läget Obligatorisk

Widgetläget när användaren inte har skrivit in obligatorisk text i textfältet.

Läget Minsta antal tecken

Widgetläget när användaren har angivit färre än det lägsta antalet tecken som krävs i textfältet.

Läget Högsta antal tecken

Widgetläget när användaren har angivit fler än det högsta antalet tecken som är tillåtet i textfältet.

Läget Minsta värde

Widgetläget när användaren har angivit ett värde som är mindre än värdet som krävs i textfältet. (Gäller för heltal, riktiga valideringar och datatypvalideringar.)

Läget Maximalt värde

Widgetläget när användaren har angivit ett värde som är större än det högsta värdet som tillåts i textfältet. (Gäller för heltal, riktiga valideringar och datatypvalideringar.)

När widgeten Textfält för validering anger ett av dessa lägen via åtgärder från användaren lägger logiken i Spry framework till en särskild CSS-klass till HTML-behållaren för widgeten i körläge. Om en användare t.ex. försöker skicka ett formulär men inte har skrivit in någon text i det obligatoriska textfältet lägger Spry till en klass i widgeten som gör att felmeddelandet ”Ett värde krävs” visas. Reglerna som styr formatet och visar felmeddelanden finns i CSS-filen som medföljer widgeten, SpryValidationTextField.css.

HTML-koden som är standard för widgeten Textfält för validering, som oftast finns i ett formulär, omfattar behållartaggen <span> som omger <input>-taggen i textfältet. HTML för widgeten Textfält för validering omfattar även skript-taggar i dokumenthuvudet och efter widgetens HTML-kod.

En mer utförlig förklaring om hur widgeten Textfält för validering fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_sprytextfield_se.

Infoga och redigera widgeten Textfält för validering

Infoga widgeten Textfält för validering

  1. Välj Infoga > Spry > Spry-validerat textfält.
  2. Fyll i dialogrutan Hjälpattribut för inmatningskod och klicka på OK.
Obs!

Du kan också infoga en widget för textfält för validering genom att använda kategorin Spry på panelen Infoga.

Ange en valideringstyp och ett format

Du kan ange olika valideringstyper för widgeten Textfält för validering. Du kan t.ex. ange valideringstyp för kreditkort om textfältet kommer att ta emot kreditkortsnummer.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. I egenskapskontrollen (Fönster > Egenskaper) väljer du en valideringstyp på menyn Typ.
  3. Om tillämpligt väljer du ett format på snabbmenyn Format.

De flesta valideringstyper gör att textfältet förväntas använda ett standardformat. Om du t.ex. lägger till valideringstypen Heltal i ett textfält kommer widgeten inte att utföra någon validering såvida inte användaren har skrivit in siffror i textfältet. För vissa valideringstyper kan du dock välja vilken typ av format textfältet ska godkänna. I följande tabell visas valideringstyper och format som finns tillgängliga via egenskapskontrollen:

Valideringstyp

Format

Inga

Inget särskilt format krävs.

Heltal

Endast siffror godkänns i textfältet.

E-postadress

Endast e-postadresser som innehåller @ och en punkt (.) som båda föregås och följs av minst en bokstav godkänns i textfältet.

Date

Formaten varierar. Gör ett val på snabbmenyn Format i egenskapskontrollen.

Time

Formaten varierar. Gör ett val på snabbmenyn Format i egenskapskontrollen. (”tt” står för formatet fm/em; ”t” står för formatet e/f.)

Kreditkort

Formaten varierar. Gör ett val på snabbmenyn Format i egenskapskontrollen. Du kan välja att godkänna alla kreditkort eller ange en viss typ av kreditkort (MasterCard, Visa o.s.v.). Blanksteg mellan kreditkortsnummer, t.ex. 4321 3456 4567 4567, godkänns inte i textfältet.

Postnummer

Formaten varierar. Gör ett val på snabbmenyn Format i egenskapskontrollen.

Telefonnummer

Telefonnummer som är formaterade för USA och Kanada (000) 000-0000 eller egna format godkänns i textfältet. Om du väljer eget format som ett alternativ anger du formatet, t.ex. 000.00(00), i textrutan Mönster.

Personnummer

Personnummer som är formaterade som 000-00-0000 godkänns i textfältet. Om du vill använda ett annat format väljer du Egen som valideringstyp och anger ett mönster. Du kan bara använda ASCII-tecken i mönstervalideringsfunktionen.

Valuta

Valuta som är formaterad som 1,000,000.00 eller 1.000.000,00 godkänns i textfältet.

Reella tal/matematisk notation

Utvärderar olika typer av siffror: heltal (t.ex. 1); flyttal (t.ex. 12.123); och flyttal i vetenskapliga beteckningar (t.ex. 1.212e+12, 1.221e-12 där e används som potensen av 10).

IP-adress

Formaten varierar. Gör ett val på snabbmenyn Format i egenskapskontrollen.

URL

URL-adresser som formaterats som http://xxx.xxx.xxx eller ftp://xxx.xxx.xxx godkänns i textfältet.

Egen

Gör att du kan ange en egen valideringstyp och ett eget format. Ange formatmönstret (och tips om så önskas) i egenskapskontrollen. Du kan bara använda ASCII-tecken i mönstervalideringsfunktionen.

Ange när valideringen inträffar

Du kan ange tillfället då valideringen sker – när besökaren klickar utanför widgeten, skriver eller försöker skicka formuläret.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. I egenskapskontrollen (Fönster > Egenskaper) markerar du alternativet som anger när du vill att valideringen ska ske. Du kan markera alla alternativ, eller endast OnSubmit.

    OnBlur

    Validerar när användaren klickar utanför textfältet.

    OnChange

    Validerar alleftersom användaren ändrar texten i textfältet.

    OnSubmit

    Validerar när användaren försöker skicka formuläret. Alternativet OnSubmit är markerat som standard och kan inte avmarkeras.

Ange lägsta och högsta antal tecken

Det här alternativet är endast tillgängligt för valideringstyperna Inga, Heltal, E-postadress och URL.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. Ange en siffra i rutan Min. tecken eller Max. tecken i egenskapskontrollen (Fönster > Egenskaper). Om du t.ex. skriver in 3 i rutan Max. tecken validerar widgeten endast om användaren skriver in tre eller fler tecken.

Ange lägsta- och högstavärden

Det här alternativet är endast tillgängligt för valideringstyperna Heltal, Valuta och Reella tal/matematisk notation.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. Ange en siffra i rutan Min. värde eller Max. värde i egenskapskontrollen (Fönster > Egenskaper). Om du t.ex. skriver in 3 i rutan Min. värde validerar widgeten endast om användaren skriver in siffran 3 eller ett större värde (4, 5, 6, osv.) i textfältet.

Visa widgetstatus i designvyn

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. I egenskapskontrollen (Fönster > Egenskaper) väljer du det läge som du vill se på snabbmenyn Förhandsgranska lägen. Om du t.ex. vill se widgeten i giltigt läge väljer du Giltig.

Ändra obligatorisk status i ett textfält

Som standard kräver alla widgetar av typen Textfält för validering som du infogar med Dreamweaver användarindata när de publiceras på en webbsida. Du kan dock göra ifyllandet av textfälten valfritt för användaren.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. Markera eller avmarkera alternativet Obligatorisk, beroende på dina önskemål, i egenskapskontrollen (Fönster > Egenskaper).

Skapa ett tips för ett textfält

Eftersom det finns så många olika typer av format för textfält kan det vara bra att ge användarna tips om vilket format de måste ange. Ett textfält med valideringstypen Telefonnummer godkänner t.ex. endast telefonnummer i formatet (000) 000-0000. Du kan skriva in dessa exempelsiffror som ett tips så att textfältet visar rätt format när användaren läser in sidan i en webbläsare.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. Skriv ett tips i textrutan Tips i egenskapskontrollen (Fönster > Egenskaper).

Blockera ogiltiga tecken

Du kan förhindra att användare skriver in ogiltiga tecken i widgeten Textfält för validering. Om du t.ex. markerar det här alternativet för en widget med valideringstypen Heltal visas ingenting i textfältet om användaren försöker skriva in en bokstav.

  1. Välj widgeten Textfält för validering i dokumentfönstret.
  2. Välj alternativet Tillämpa mönster i egenskapskontrollen (Fönster > Egenskaper):

Anpassa widgeten Textfält för validering

Trots att du kan göra enkla ändringar i widgeten Textfält för validering i egenskapskontrollen stöder den inte anpassade formateringsåtgärder. Du kan ändra CSS för widgeten Textfält för validering så att du kan skapa en widget som är formaterad enligt dina önskemål. En mer avancerad lista över formateringsåtgärder finns på www.adobe.com/go/learn_dw_sprytextfield_custom_se.

Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryValidationTextField.css. Dreamweaver sparar filen SpryValidationTextField.css i mappen SpryAssets på platsen när du skapar en widget för Spry-validerat textfält. Titta i denna fil eftersom den innehåller kommenterad information om olika typer av format som gäller för widgeten.

Obs!

Trots att du enkelt kan redigera regler för widgeten Textfält för validering direkt i den tillhörande CSS-filen kan du även använda panelen CSS-format för att redigera CSS-formaten för widgeten. Panelen CSS-format är till nytta för att hitta CSS-klasserna som tilldelats olika delar av widgeten, i synnerhet om du använder läget Aktuell i panelen.

Text i felmeddelande för textfält för Spry-validering

Som standard visas felmeddelanden för widgeten Textfält för validering i rött med en kant på 1 pixel runt texten.

  1. Om du vill ändra textformatet för widgeten Textfält för validering, använder du följande tabell för att hitta rätt CSS-regel och ändrar sedan standardegenskaperna eller lägger till egna egenskaper och värden för textformat:

    Text som ska ändras

    Relevant CSS-regel

    Relevanta egenskaper som ska ändras

    Text i felmeddelande

    .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

Ändra bakgrundsfärger i widgeten Textfält för validering

  1. Om du vill ändra bakgrundsfärgen för widgeten Textfält för validering i olika lägen använder du följande tabell för att leta reda på rätt CSS-regel och ändrar sedan standardvärdena för bakgrundsfärgen:

    Färg som ska ändras

    Relevant CSS-regel

    Relevant egenskap som ska ändras

    Bakgrundsfärg i widget i giltigt läge

    .textfieldValidState input, input.textfieldValidState

    background-color: #B8F5B1;

    Bakgrundsfärg i widget i ogiltigt läge

    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;

    Bakgrundsfärg i widget i fokus

    .textfieldFocusState input, input.textfieldFocusState

    background-color: #FFFFCC;

 Adobe

Få hjälp snabbare och enklare

Ny användare?

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online