Välj Infoga > Spry > Kryssruta för Spry-validering.
Senast uppdaterad den
|
Gäller även Adobe Dreamweaver
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 Kryssruta för validering
Widgeten Kryssruta för Spry-validering är en kryssruta eller grupp med kryssrutor i HTML-format som visar giltiga eller ogiltiga lägen när användaren markerar eller inte markerar en kryssruta. Du kan t.ex. lägga till widgeten Kryssruta för validering i ett formulär där en användare måste göra tre val. Om användaren inte göra alla tre valen visar widgeten ett meddelande om att det lägsta antalet val inte har uppfyllts.
I följande exempel visas widgeten Kryssruta för validering i olika lägen:
A. Widgetgrupp med kryssrutor för validering, läget minsta antal markeringar B. Widgeten Kryssruta för validering, obligatoriskt läge
Widgeten Kryssruta 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 Kryssruta för validering kan validera vid flera tillfällen, t.ex. när användaren klickar utanför widgeten, när användaren markerar 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 Giltig
Widgetläget när användaren har gjort en markering eller rätt antal markeringar och formuläret kan skickas.
Läget Obligatorisk
Widgetläget när användaren inte har gjort en obligatorisk markering.
Läget Minsta antal markeringar
Widgetläget när användaren har markerat färre än det minsta antalet kryssrutor som krävs.
Läget Högsta antal markeringar
Widgetläget när användaren har markerat mer än det högsta antalet kryssrutor som är tillåtet.
När widgeten Kryssruta 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 gjort några markeringar lägger Spry till en klass i widgeten som gör att felmeddelandet ”Gör ett val” visas. Reglerna som styr formatet och visar felmeddelanden finns i CSS-filen som medföljer widgeten, SpryValidationCheckbox.css.
HTML-koden som är standard för widgeten Kryssruta för validering, som oftast finns i ett formulär, omfattar behållartaggen <span> som omger <input type="checkbox">-taggen i kryssrutan. HTML för widgeten Kryssruta för validering omfattar även skript-taggar i dokumenthuvudet och efter widgetens HTML-kod.
En mer utförlig förklaring om hur widgeten Kryssruta för validering fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_sprycheckbox_se.
Infoga och redigera widgeten Kryssruta för validering
Infoga widgeten Kryssruta för validering
-
-
Fyll i dialogrutan Hjälpattribut för inmatningskod och klicka på OK.
Obs!
Du kan också infoga en widget för kryssruta 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, när användaren markerar eller när användaren försöker skicka formuläret.
-
Välj widgeten Kryssruta för validering i dokumentfönstret.
-
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 kryssrutan.
OnChange
Validerar när användaren markerar.
OnSubmit
Validerar när användaren försöker skicka formuläret. Alternativet OnSubmit är markerat som standard och kan inte avmarkeras.
Ange ett intervall för minimal och maximal markering
Widgeten Kryssruta för validering är inställd på obligatorisk som standard. Om du infogar ett antal kryssrutor på sidan kan du dock ange ett intervall med minsta och högsta antal markeringar. Om du t.ex. har sex kryssrutor i <span>-taggen för en enda widget för kryssruta för validering och vill se till att användaren markerar minst tre kryssrutor kan du göra en sådan inställning för hela widgeten.
-
Välj widgeten Kryssruta för validering i dokumentfönstret.
-
Välj alternativet Förstärk intervall i egenskapskontrollen (Fönster > Egenskaper):
-
Ange ett minsta eller högsta antal (eller båda) kryssrutor som du vill att användaren ska markera.
Visa widgetstatus i designvyn
-
Välj widgeten Kryssruta 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. Du kan t.ex. välja Första för att se widgeten i det första läget.
Anpassa felmeddelanden i widgeten Kryssruta för validering
Som standard visas felmeddelanden för widgeten Kryssruta för validering i rött med en kant på 1 pixel runt texten. Du kan ändra CSS för widgeten Kryssruta 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_sprycheckbox_custom_se.
-
Öppna filen SpryValidationCheckbox.css.
Dreamweaver sparar filen SpryValidationCheckbox.css i mappen SpryAssets på platsen när du skapar en widget för kryssruta 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.
-
Använd följande tabell för att hitta rätt CSS-regel och ändra sedan standardegenskaperna eller lägg till egna egenskaper och värden för textformatering:
Text som ska formateras
Relevant CSS-regel
Relevanta egenskaper som ska ändras
Text i felmeddelande
.checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg color: #CC3333; border: 1px solid #CC3333;
Obs!Trots att du enkelt kan redigera regler för widget för kryssruta för Spry-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.
Logga in på ditt konto