Selecteer Invoegen > Spry > Spry-validatie voor bevestigen.
Laatst bijgewerkt op
2 mei 2021
Opmerking:
In Dreamweaver CC en hoger zijn Spry-widgets vervangen door jQuery-widgets. U kunt de bestaande Spry-widgets op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-widgets toevoegen.
Over de widget Validatie voor bevestigen
De widget Validatie voor bevestigen is een tekstveld of een wachtwoordformulierveld waarin een geldige of ongeldige staat wordt weergegeven wanneer een gebruiker een waarde invoert die niet overeenkomt met de waarde van een vergelijkbaar veld in hetzelfde formulier. U kunt bijvoorbeeld een widget Validatie voor bevestigen aan een formulier toevoegen waarmee een gebruiker het wachtwoord nogmaals moet typen dat in een vorig veld is ingevoerd. Als de gebruiker het wachtwoord niet op exact dezelfde wijze invoert, geeft de widget een foutbericht dat de waarden niet overeenkomen.
U kunt een widget Validatie voor bevestigen ook gebruiken samen met een widget Tekstveld voor validatie om e-mailadressen te valideren.
Opmerking:
Voordat u met de bevestigingswidget gaat werken, moet u goed bekend zijn met Spry-validatiewidgets. Als u hiermee niet bekend bent, raadpleegt u Werken met de widget Spry-tekstveld voor validatie of een van de andere overzichtsdocumenten voor validatiewidgets voor u doorgaat. In dit overzicht staan niet alle basisbegrippen met betrekking tot validatiewidgets.
De volgende afbeelding is een voorbeeld van een veelgebruikte bevestigingswidget:
A. Een wachtwoordveld of een widget wachtwoord voor Spry-validatie B. Widget bevestigen
De widget validatie voor bevestigen bevat een aantal staten (bijvoorbeeld geldig, ongeldig, vereist, enzovoort). U kunt de eigenschappen van deze staten wijzigen door het bijbehorende CSS-bestand te bewerken (SpryValidationConfirm.css), afhankelijk van de gewenste validatieresultaten. Een widget validatie voor bevestigen kan op verschillende momenten valideren—bijvoorbeeld wanneer de bezoeker van de site buiten de widget klikt, wanneer er wordt getypt of wanneer de bezoeker het formulier probeert te verzenden.
Status bij openen
Wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het formulier opnieuw instelt.
Toestand Focus
Wanneer de gebruiker de invoegpositie in de widget plaatst.
Toestand Geldig
Wanneer de gebruiker informatie correct invoert en het formulier kan worden verzonden.
Toestand Ongeldig
Wanneer de gebruiker tekst invoert die niet overeenkomt met de tekst die in het vorige tekstveld, widget Tekstveld voor validatie of de widget Wachtwoord voor validatie is ingevoerd.
Toestand Vereist
Wanneer de gebruiker geen vereiste tekst in het tekstveld invoert.
Zie www.adobe.com/go/learn_dw_spryconfirm_nl voor een uitgebreidere uitleg van de werking van widgets validatie voor bevestigen, plus aanvullende informatie over de structuur van widgets.
De widget validatie voor bevestigen invoegen en bewerken
De widget validatie voor bevestigen invoegen
-
-
Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.
Opmerking:
U kunt een widget validatie voor bevestigen ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.
Status wijziging vereist voor een widget validatie voor bevestigen
Standaard is voor alle widgets Validatie voor bevestigen die u met Dreamweaver invoegt, invoer van de gebruiker nodig wanneer de widget op een webpagina wordt gepubliceerd. U kunt het invullen van tekstvelden voor een bevestiging echter optioneel maken voor de gebruiker.
-
Selecteer een widget validatie voor bevestigen in het documentvenster door op de desbetreffende blauwe tab te klikken.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit.
Geef het tekstveld op waarop moet worden gevalideerd
-
Selecteer een widget validatie voor bevestigen in het documentvenster door op de desbetreffende blauwe tab te klikken.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer het tekstveld aan de hand waarvan u wilt valideren door een tekstveld te selecteren in het pop-upmenu Valideren aan de hand van. Alle tekstvelden waaraan een unieke id is toegewezen, worden als opties in het pop-upmenu weergegeven.
Widgettoestanden weergeven in de ontwerpweergave
-
Selecteer een widget validatie voor bevestigen in het documentvenster door op de desbetreffende blauwe tab te klikken.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-upmenu Voorvertoningsstatus. Bijvoorbeeld, selecteer Geldig als u de widget in de toestand Geldig wilt weergeven.
Opgeven wanneer validatie wordt uitgevoerd
U kunt opgeven wanneer de validatie wordt uitgevoerd—op het moment dat de bezoeker buiten de widget klikt, tijdens de invoer of wanneer de bezoeker het formulier probeert te verzenden.
-
Selecteer een widget validatie voor bevestigen in het documentvenster door op de desbetreffende blauwe tab te klikken.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie die aangeeft wanneer de validatie moet worden uitgevoerd. U kunt alle opties of alleen Verzenden selecteren.
Vervagen
Valideert op het moment dat de gebruiker buiten het tekstveld voor bevestigen klikt.
Wijzigen
Valideert terwijl de gebruiker tekst in het tekstveld voor bevestigen typt.
Verzenden
Valideert op het moment dat de gebruiker het formulier probeert te verzenden. De optie Verzenden is standaard geselecteerd en kan niet worden uitgeschakeld.
De widget Bevestigen aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget validatie voor bevestigen kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget validatie voor bevestigen wijzigen en een widget maken die naar uw eigen smaak is opgemaakt. Zie www.adobe.com/go/learn_dw_spryconfirm_custom_nl voor een uitgebreidere lijst met opmaaktaken.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationConfirm.css. Wanneer u een widget Spry-validatie voor bevestigen maakt, slaat Dreamweaver het bestand SpryValidationConfirm.css op in de map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie bevat over de diverse stijlen die u op de widget kunt toepassen.
Opmerking:
Hoewel u de regels voor de widget validatie voor bevestigen gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van de widget te bewerken. Het deelvenster CSS-stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van dee widget zijn toegewezen, met name als u de modus Huidig van het paneel gebruikt.
Een widget validatie voor bevestigen opmaken (algemene instructies)
-
Open het bestand SpryValidationConfirm.css.
-
Ga naar de CSS-regel voor het gedeelte van de widget dat u wilt wijzigen. Als u bijvoorbeeld de achtergrondkleur van de vereiste status van de widget bevestigen wilt wijzigen, bewerkt u de input.confirmRequiredState-regel in het bestand SpryValidationConfirm.css.
-
Breng de gewenste wijzigingen in de CSS-regel aan en sla het bestand op.
Het bestand SpryValidationConfirm.css bevat een uitgebreid commentaar, waarin de code en het doel van bepaalde regels worden uitgelegd. Zie het commentaar in het bestand voor meer informatie.
Tekst opmaken van foutbericht voor widget validatie voor bevestigen
Standaard worden foutberichten voor de widget validatie voor bevestigen weergegeven in een kader met een effen rode rand van 1 pixel breed.
-
Als u de tekstopmaak van de foutberichten voor een widget validatie voor bevestigen wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna verandert u de standaardeigenschappen of voegt u uw eigen tekstopmaakeigenschappen en -waarden toe.
Te wijzigen tekst
Relevante CSS-regel
Relevante eigenschappen om te wijzigen
Tekst van foutbericht
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg kleur: #CC3333; rand: 1px solid #CC3333;
De achtergrondkleuren wijzigen van de widget validatie voor bevestigen
-
Als u de achtergrondkleuren van de widget validatie voor bevestigen in verschillende staten wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken, en verandert u de standaardwaarden voor de achtergrondkleur.
Te wijzigen kleur
Relevante CSS-regel
Relevante eigenschap om te wijzigen
Achtergrondkleur van widget in toestand Geldig
.confirmValidState input, input.confirmValidState background-color: #B8F5B1;
Achtergrondkleur van widget in toestand Ongeldig
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F;
Achtergrondkleur van widget bij focus
.confirmFocusState input, input.confirmFocusState background-color: #FFFFCC;
