Använda widgeten Spry-validerade alternativknappar i Dreamweaver

Sök

Senast uppdaterad den 2 maj 2021

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 Valideringsalternativknappar

Widgeten Valideringsalternativknappar består av en grupp med alternativknappar som validerar ett val. Widgeten gör att bara en alternativknapp i gruppen kan väljas.

I följande exempel visas widgeten Valideringsalternativknappar i olika lägen.

A. Felmeddelanden för widgeten Valideringsalternativknappar B. Widgeten Valideringsalternativknappar

Widgeten Valideringsalternativknappar har tre lägen förutom det inledande: giltig, ogiltig och obligatoriskt värde. Du kan ändra egenskaperna för dessa lägen genom att redigera motsvarande CSS-fil (SpryValidationRadio.css), beroende på önskat valideringsresultat. Widgeten Valideringsalternativknappar kan validera vid flera tillfällen, t.ex. när användaren klickar utanför widgeten, när användaren gör val eller försöker skicka formuläret.

Ursprungligt läge

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

Läget Giltig

När användaren gör ett val, och formuläret kan skickas.

Läget Obligatorisk

När användaren inte gör det val som krävs.

Läget Ogiltig

När användaren väljer en alternativknapp där värdet inte godtas.

När widgeten Valideringsalternativknappar 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, SpryValidationRadio.css.

Standard-HTML-koden för widgeten Valideringsalternativknappar, som vanligtvis finns i ett formulär, utgörs av behållarkoden span som omsluter koden input type="radio" för alternativgruppen. HTML-koden för widgeten Valideringsalternativknappar omfattar även skript-taggar i dokumenthuvudet och efter widgetens HTML-kod.

En mer utförlig förklaring till hur widgeten Valideringsalternativknappar fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_spryradio_se.

Infoga och redigera widgeten Valideringsalternativknappar

Infoga widgeten Valideringsalternativknappar

Välj Infoga > Spry > Spry-validerade alternativknappar.
Ange ett namn på gruppen med alternativknappar i rutan Namn.
Lägg till eller ta bort alternativknappar från gruppen genom att klicka på plus- (+) eller minusknappen (–).
Klicka i kolumnen Etikett på namnet på respektive alternativknapp så att fältet kan redigeras, och tilldela unika namn till respektive alternativknapp.
Klicka i kolumnen Värde på respektive värde så att fältet kan redigeras, och tilldela ett unikt värde till respektive alternativknapp.
(Valfritt) Klicka på en alternativknapp eller dess värde om du vill markera en viss rad, och klicka sedan på upp- eller nedpilarna för att flytta raden uppåt eller nedåt.
Välj en layouttyp för alternativknappen.

Radbrytningar

Placerar varje alternativknapp på en separat rad med hjälp av radbrytningskoder (br).

Tabell

Placerar varje alternativknapp på en separat rad med hjälp av enskilda tabellrader (tr-taggar).
Klicka på OK.

Obs!

Du kan också infoga widgeten Valideringsalternativknappar 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.

Markera widgeten Valideringsalternativknappar i fönstret Dokument genom att klicka på den blå fliken.
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 gruppen med alternativknappar.

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.

Visa widgetstatus i designvyn

Markera widgeten Valideringsalternativknappar i fönstret Dokument genom att klicka på den blå fliken.
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.

Ändrar obligatoriskt läge för alternativknappar

Som standard kräver widgeten Valideringsalternativknappar att användaren gör ett val innan formuläret skickas. Du kan emellertid göra det valfritt för användaren att göra ett val.

Markera widgeten Valideringsalternativknappar i fönstret Dokument genom att klicka på den blå fliken.
Avmarkera alternativet Obligatorisk i egenskapskontrollen (Fönster > Egenskaper):

Ange ett tomt eller ogiltigt värde

Du kan ange ett värde som registreras som tomt eller ogiltigt om användaren väljer en alternativknapp som är kopplad till något av dessa värden. Om användaren markerar en alternativknapp med tomt värde returneras felmeddelandet ”Gör ett val” från webbläsaren. Om användaren markerar en alternativknapp med ogiltigt värde returneras felmeddelandet ”Välj ett giltigt värde” från webbläsaren.

Widgeten Valideringsalternativknappar med en alternativknapp med tomt värde.

Markera alternativknappen i widgeten Valideringsalternativknappar som du vill använda som tom eller ogiltig alternativknapp. När du anger ett tomt eller ogiltigt värde för widgeten måste det finnas motsvarande alternativknappar med dessa värden redan tilldelade.
Tilldela alternativknappen ett markerat värde i egenskapskontrollen för Valideringsalternativknappar (Fönster > Egenskaper). Om du vill skapa en alternativknapp med ett tomt värde skriver du inget i textrutan Markerat värde. Om du vill skapa en alternativknapp med ett ogiltigt värde skriver du ogiltigt i textrutan Markerat värde.
Markera hela widgeten Valideringsalternativknappar genom att klicka på den blå fliken.
Ange tomma eller ogiltiga värden i egenskapskontrollen. Om du vill skapa en widget som visar felmeddelandet ”Gör ett val” för ett tomt värde, skriver du inget i textrutan Tomt värde. Om du vill skapa en widget som visar felmeddelandet ”Välj ett giltigt värde” för ett ogiltigt värde, skriver du ogiltigt i textrutan Ogiltigt värde.

Kom ihåg att både alternativknappen och widgeten Valideringsalternativknappar måste ha inga eller ogiltiga värden tilldelade för felmeddelanden för att kunna visas på rätt sätt.

Anpassa widgeten Valideringsalternativknappar

Du kan göra enkla ändringar av widgeten Valideringsalternativknappar i egenskapskontrollen, men det går inte att skapa anpassad formatering. Du kan i stället ändra CSS för widgeten Valideringsalternativknappar om du vill skapa en widget som är formaterad efter dina behov. En mer avancerad lista med formateringsåtgärder finns på www.adobe.com/go/learn_dw_spryradio_custom_se.

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

Obs!

Du kan på ett enkelt sätt redigera regler för widgeten Valideringsalternativknappar direkt i den tillhörande CSS-filen, men du kan också använda panelen CSS-format när du vill 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.

Fomatera widgeten Valideringsalternativknappar (allmänna instruktioner)

Öppna filen SpryValidationRadio.css.
Leta reda på CSS-regeln för den del av widgeten som du vill ändra. Om du till exempel vill ändra bakgrundsfärg för widgetens obligatoriska läge redigerar du regeln radioRequiredState i filen SpryValidationRadio.css.
Gör ändringarna i CSS-regeln och spara filen.

Filen SpryValidationRadio.css innehåller omfattande kommentarer som förklarar koden och syftet med vissa regler. Mer information finns i kommentarerna i filen.

Formatera felmeddelandetext för widgeten Valideringsalternativknappar

Som standard visas felmeddelanden för widgeten Valideringsalternativknappar i rött med en heldragen kant på 1 pixel runt texten.

Om du vill ändra textformatet för widgeten Valideringsalternativknappar använder du följande tabell för att leta reda på rätt CSS-regel och ändrar sedan standardegenskaperna eller lägger till egna egenskaper och värden för textformat: