Välj Infoga > Spry > Textområde för Spry-validering.
Senast uppdaterad den
May 02, 2021 07:37:08 PM GMT
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 Textområde för validering
Widgeten Textområde för Spry-validering är ett textområde som visar giltiga eller ogiltiga lägen när besökaren skriver in några meningar med text. Om textområdet är ett obligatoriskt fält och användaren inte skriver in någon text visar widgeten ett meddelande om att ett värde krävs.
I följande exempel visas widgeten Textområde för validering i olika lägen:
A. Räknare för antal kvarstående tecken B. Widgeten Textområde i fokus, läget högsta antal tecken C. Widgeten Textområde i fokus, giltigt läge D. Widgeten Textområde, obligatoriskt läge E. Räknare för antalet inskrivna tecken
Widgeten Textområde 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 Textområde för validering kan validera vid flera tillfällen, t.ex. när användaren klickar utanför widgeten, när användaren skriver eller 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 Obligatorisk
Widgetläget när användaren inte har skrivit in någon text.
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 textområdet.
Läget Högsta antal tecken
Widgetläget när användaren har angett fler än det högsta antalet tecken som är tillåtet i textområdet.
När widgeten Textområde 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 textområdet 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, SpryValidationTextArea.css.
HTML-koden som är standard för widgeten Textområde för validering, som oftast finns i ett formulär, omfattar behållartaggen <span> som omger <textarea>-taggen i textområdet. HTML för widgeten Textområde för validering omfattar även skript-taggar i dokumenthuvudet och efter widgetens HTML-kod.
En mer utförlig förklaring om hur widgeten Textområde för validering fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_sprytextarea_se.
Infoga och redigera widgeten Textområde för validering
Infoga widgeten Textområde för validering
-
-
Fyll i dialogrutan Hjälpattribut för inmatningskod och klicka på OK.
Obs!
Du kan också infoga en widget för textområde för validering genom att använda kategorin Spry på panelen Infoga.
Ange när valideringen inträffar
Du kan ange tillfället då valideringen sker – när användaren klickar utanför widgeten, skriver eller försöker skicka formuläret.
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
I egenskapskontrollen (Fönster > Egenskaper) markerar du alternativet Validera på 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
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
Ange en siffra i rutan Min. tecken eller Max. tecken i egenskapskontrollen (Fönster > Egenskaper). Om du t.ex. skriver in 20 i rutan Max. tecken validerar widgeten endast om användaren skriver in 20 eller fler tecken i textområdet.
Lägga till en teckenräknare
Du kan lägga till en teckenräknare som gör att användare kan få reda på hur många tecken de har skrivit in eller hur många tecken som kvarstår när text skrivs in i textområdet. Som standard visas räknaren utanför det nedre högra hörnet i widgeten när du lägger till den.
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
Markera antingen alternativet Antal tecken eller Tecken kvar i egenskapskontrollen (Fönster > Egenskaper).Obs!
Alternativet Tecken kvar är endast tillgängligt om du redan har angivit ett högsta antal tecken som är tillåtet.
Visa widgetstatus i designvyn
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
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 textområde
Som standard kräver alla widgetar av typen Textområde för validering som du infogar med Dreamweaver användarindata när de publiceras på en webbsida. Du kan dock göra textområdena valfria för validering.
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
Markera eller avmarkera alternativet Obligatorisk, beroende på dina önskemål, i egenskapskontrollen (Fönster > Egenskaper).
Skapa ett tips för ett textområde
Du kan lägga till ett tips i textområdet (t.ex. ”Skriv in en beskrivning här”) så att användaren vet vilken typ av information han/hon ska ange i textområdet. I textområdet visas tipstexten när användaren läser in sidan i en webbläsaren.
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
Skriv ett tips i textrutan Tips i egenskapskontrollen (Fönster > Egenskaper).
Blockera extratecken
Du kan hindra användare från att ange fler än det högsta antalet tillåtna tecken i widgeten Textområde för validering. Om du t.ex. markerar det här alternativet för en widget som inte ska godkänna mer än 20 tecken kommer användaren inte att kunna skriva in mer än 20 tecken i textområdet.
-
Välj widgeten Textområde för validering i dokumentfönstret.
-
Välj alternativet Blockera extratecken i egenskapskontrollen (Fönster > Egenskaper).
Anpassa widgeten Textområde för validering
Trots att du kan göra enkla ändringar i widgeten Textområde för validering i egenskapskontrollen stöder den inte anpassade formateringsåtgärder. Du kan ändra CSS för widgeten Textområde 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_sprytextarea_custom_se.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryValidationTextArea.css. Dreamweaver sparar filen SpryValidationTextArea.css i mappen SpryAssets på platsen när du skapar en widget för textområde för Spry-validering. 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 Textområde 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.
Formatera text i felmeddelande för Textområde för validering
Som standard visas felmeddelanden för widgeten Textområde för validering i rött med en kant på 1 pixel runt texten.
-
Om du vill ändra textformatet för widgeten Textområde 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
.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Ändra bakgundsfärger i widgeten Textområde för validering
-
Om du vill ändra bakgrundsfärgen för widgeten Textområde 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:
Bakgrundsfärg som ska ändras
Relevant CSS-regel
Relevant egenskap som ska ändras
Bakgrundsfärg i widget i giltigt läge
.textareaValidState textarea, textarea.textareaValidState background-color: #B8F5B1;
Bakgrundsfärg i widget i ogiltigt läge
textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea background-color: #FF9F9F;
Bakgrundsfärg i widget i fokus
.textareaFocusState textarea, textarea.textareaFocusState background-color: #FFFFCC;
Logga in på ditt konto