Arbeta med widgeten Spry-validerat textfält

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 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.

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

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

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

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).

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

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

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

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.)

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

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.

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:

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.

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.

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.

Visa widgetstatus i designvyn

Ä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.

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.

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.

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.

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.

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