Välj Infoga > Spry > Spry-validerat bekräfta-fält.
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 Bekräfta validering
Widgeten Bekräfta validering är ett textfält eller ett lösenordsformulärfält som visar giltiga eller ogiltiga lägen när en användare skriver ett värde som inte matchar värdet i ett liknande fält i samma formulär. Du kan till exempel lägga till widgeten Bekräfta validering i ett formulär som kräver att användaren skriver om lösenordet som han eller hon skrivit i ett tidigare fält. Om användaren inte skriver lösenordet på exakt samma sätt returnerar widgeten ett felmeddelande som anger att värdena inte matchar.
Du kan också använda widgeten Bekräfta validering tillsammans med widgeten Textfält för validering för att validera e-postadresser.
Obs!
Du bör känna till de olika Spry-valideringswidgetarna innan du börjar arbeta med widgeten Bekräfta validering. Om du inte känner till dem läser du Arbeta med widgeten Spry-validerat textfält eller översikten för någon annan valideringswidget innan du fortsätter. I den här översikten beskrivs inte alla grundläggande begrepp för valideringswidgetar.
I bilden nedan visas hur en bekräftelsewidget kan användas:
A. Ett lösenordsfält eller widget för Spry-validering av lösenord B. Bekräftelsewidget
Widgeten Bekräfta validering innehåller ett antal lägen (t.ex. giltig, ogiltig, obligatoriskt värde, o.s.v.). Du kan ändra egenskaperna för dessa lägen genom att redigera motsvarande CSS-fil (SpryValidationConfirm.css), beroende på önskat valideringsresultat. Widgeten Bekräfta validering kan validera vid flera tillfällen, t.ex. när besökaren klickar utanför widgeten, när de skriver eller när de 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 Fokus
När användaren placerar insättningspunkten i widgeten.
Läget Giltig
När användaren skriver information korrekt, och formuläret kan skickas.
Läget Ogiltig
När användare skriver in text som inte matchar texten som skrivits i ett tidigare textfält, widgeten Textfält för validering eller widgeten Validera lösenord.
Läget Obligatorisk
När användaren inte skriver den obligatoriska texten i textfältet.
En mer omfattande förklaring till hur widgeten Bekräfta validering fungerar, samt annan information om widgetstrukturen, finns i www.adobe.com/go/learn_dw_spryconfirm_se.
Infoga och redigera widgeten Bekräfta validering
Infoga widgeten Bekräfta validering
-
-
Fyll i dialogrutan Hjälpattribut för inmatningskod och klicka på OK.
Obs!
Du kan också infoga widgeten Bekräfta validering genom att använda kategorin Spry på panelen Infoga.
Ändra obligatoriskt läge för widgeten Bekräfta validering
Som standard kräver alla widgetar av typen validering av bekräftelsefält som du infogar med Dreamweaver användarindata när de publiceras på en webbsida. Du kan emellertid göra det valfritt för användaren att fylla i bekräftelsefältet.
-
Markera widgeten Bekräfta validering i fönstret Dokument genom att klicka på den blå fliken.
-
Markera eller avmarkera alternativet Obligatorisk, beroende på dina önskemål, i egenskapskontrollen (Fönster > Egenskaper).
Ange textfältet som du vill validera mot
-
Markera widgeten Bekräfta validering i fönstret Dokument genom att klicka på den blå fliken.
-
Gå till egenskapskontrollen (Fönster > Egenskaper) och välj textfältet som du vill validera mot genom att markera ett textfält på snabbmenyn Validera mot. Alla textfält med unika ID:n tilldelade visas som alternativ på snabbmenyn.
Visa widgetstatus i designvyn
-
Markera widgeten Bekräfta validering 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. Om du t.ex. vill se widgeten i giltigt läge väljer du Giltig.
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.
-
Markera widgeten Bekräfta validering 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 bekräftelsefältet.
OnChange
Validerar allt eftersom användaren ändrar texten i bekräftelsefältet.
OnSubmit
Validerar när användaren försöker skicka formuläret. Alternativet OnSubmit är markerat som standard och kan inte avmarkeras.
Anpassa bekräftelsewidgeten
Du kan göra enkla ändringar i widgeten Bekräfta validering i egenskapskontrollen, men det går inte att skapa anpassad formatering. Du kan i stället ändra CSS för widgeten Bekräfta validering om du vill skapa en widget som är formaterad efter eget behov. En mer avancerad lista med formateringsåtgärder finns på www.adobe.com/go/learn_dw_spryconfirm_custom_se.
Alla CSS-regler i följande avsnitt hänvisar till standardreglerna som finns i filen SpryValidationConfirm.css. Dreamweaver sparar filen SpryValidationConfirm.css i mappen SpryAssets på platsen när du skapar widgeten Spry-validerat bekräfta-fält. 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 Bekräfta validering 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 Bekräfta validering (allmänna instruktioner)
-
Öppna filen SpryValidationConfirm.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 bekräftelsewidgetens obligatoriska läge redigerar du regeln input.confirmRequiredState i filen SpryValidationConfirm.css.
-
Gör ändringarna i CSS och spara filen.
Filen SpryValidationConfirm.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 Bekräfta validering
Som standard visas felmeddelanden för widgeten Bekräfta validering i rött med en heldragen kant på 1 pixel runt texten.
-
Om du vill ändra textformatet för widgeten Bekräfta validering 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.
Text som ska ändras
Relevant CSS-regel
Relevanta egenskaper som ska ändras
Text i felmeddelande
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Ändra bakgrundsfärger i widgeten Bekräfta validering
-
Om du vill ändra bakgrundsfärgen för widgeten Bekräfta 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.
Färg som ska ändras
Relevant CSS-regel
Relevant egenskap som ska ändras
Bakgrundsfärg i widget i giltigt läge
.confirmValidState input, input.confirmValidState background-color: #B8F5B1;
Bakgrundsfärg i widget i ogiltigt läge
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F;
Bakgrundsfärg i widget i fokus
.confirmFocusState input, input.confirmFocusState background-color: #FFFFCC;
