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.
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.
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.
Du kan också infoga widgeten Bekräfta validering genom att använda kategorin Spry på panelen Infoga.
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.
Du kan ange tillfället då valideringen sker – när besökaren klickar utanför widgeten, skriver eller försöker skicka formuläret.
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.
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.
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.
Ö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.
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; |
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; |
Logga in på ditt konto