Välj Infoga > Spry > Markera validering.
Senast uppdaterad den
May 02, 2021 07:37:09 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 Markera validering
Widgeten för Spry-validering av val är en snabbmeny som visar giltiga eller ogiltiga lägen när användaren gör ett val. Du kan t.ex. infoga widgeten Markera validering som innehåller en lista med lägen som är grupperade i olika sektioner och uppdelade med vågräta linjer. Om användaren av misstag markerar en av uppdelningslinjerna istället för ett av lägena kommer widgeten för validering av val att visa ett meddelande för användaren om att markeringen är ogiltig.
I följande exempel visas en utökad widget för validering av val samt det komprimerade formatet av widgeten i olika lägen:
A. Widgeten Markera validering i fokus B. Widgeten Markera validering, giltigt läge C. Widgeten Markera validering, obligatoriskt läge D. Widgeten Markera validering, ogiltigt läge
Widgeten Markera 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 Markera 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 Fokus
Widgetläget när användaren klickar på widgeten.
Läget Giltig
Widgetläget när användaren har markerat ett giltigt objekt och formuläret kan skickas.
Läget Ogiltig
Widgetläget när användaren har markerat ett ogiltigt objekt.
Läget Obligatorisk
Widgetläget när användaren inte har markerat något giltigt objekt.
När widgeten Markera validering anger ett av de ovanstående lägena 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 markerat något objekt på menyn lägger Spry till en klass i widgeten som gör att felmeddelandet ”Välj ett objekt” visas. Reglerna som styr formatet och visar felmeddelanden finns i CSS-filen som medföljer widgeten, SpryValidationSelect.css.
HTML-koden som är standard för widgeten Markera validering, som oftast finns i ett formulär, omfattar behållartaggen <span> som omger <select>-taggen i textområdet. HTML för widgeten Markera validering omfattar även skript-taggar i dokumenthuvudet och efter widgetens HTML-kod.
En mer utförlig förklaring om hur widgeten Markera validering fungerar samt en fullständig beskrivning av koden för widgeten finns på www.adobe.com/go/learn_dw_spryselect_se.
Infoga och redigera widgeten Markera validering
Infoga widgeten Markera validering
-
-
Fyll i dialogrutan Hjälpattribut för inmatningskod och klicka på OK.
-
Lägg till alternativtaggar som innehåller menyalternativ och värden i kodvyn. Dreamweaver gör inte detta automatiskt åt dig. Mer information finns i föregående avsnitt.
Obs!
Du kan också infoga en widget för validering av val 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 Markera 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 widgeten.
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
-
Välj widgeten Markera 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.
Förbjud eller tillåt tomma värden
Alla widgetar för validering av val som du infogar med Dreamweaver kräver som standard att användare markerar menyalternativ som har ett relaterat värde när widgeten publiceras på en webbsida. Du kan dock inaktivera det här alternativet.
-
Välj widgeten Markera validering i dokumentfönstret.
-
Markera eller avmarkera alternativet Tillåt inte tomma värden, beroende på dina önskemål, i egenskapskontrollen (Fönster > Egenskaper).
Ange ett ogiltigt värde
Du kan ange ett värde som kommer att registreras som ogiltigt om användaren väljer ett menyalternativ som är kopplat till det värdet. Om du t.ex. anger -1 som ett ogiltigt värde och tilldelar värdet en alternativtagg kommer widgeten att visa ett felmeddelande om användaren väljer det menyalternativet.
<option value="-1"> ------------------- </option>
-
Välj widgeten Markera validering i dokumentfönstret.
-
Ange en siffra som ska användas som ogiltigt värde i rutan Ogiltigt värde i egenskapskontrollen (Fönster > Egenskaper).
Anpassa widgeten Markera validering
Trots att du kan göra enkla ändringar i widgeten Markera validering i egenskapskontrollen stöder den inte anpassade formateringsåtgärder. Du kan ändra CSS för widgeten Markera validering så att du kan skapa en widget som är formaterad enligt dina önskemål.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryValidationSelect.css. Dreamweaver sparar filen SpryValidationSelect.css i mappen SpryAssets på platsen när du skapar en widget för Spry-validering av val. 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 Markera 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 Markera validering
Som standard visas felmeddelanden för widgeten Markera validering i rött med en kant på 1 pixel runt texten.
-
Om du vill ändra textformatet för widgeten Markera 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 formateras
Relevant CSS-regel
Relevanta egenskaper som ska ändras
Text i felmeddelande
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Ändra bakgrundsfärger i widgeten Markera validering
-
Om du vill ändra bakgrundsfärgen för widgeten Markera 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
.selectValidState select, select.selectValidState background-color: #B8F5B1;
Bakgrundsfärg i widget i ogiltigt läge
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
Bakgrundsfärg i widget i fokus
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
Logga in på ditt konto