Kies Invoegen > Spry > Spry-tekstveld voor validatie.
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 tekstveld voor validatie
Een Spry-widget tekstveld voor validatie is een tekstveld dat geldige of ongeldige toestanden weergeeft wanneer de sitebezoeker tekst invoert. U kunt bijvoorbeeld een widget tekstveld voor validatie toevoegen aan een formulier waarin bezoekers hun e-mailadressen invoeren. Als de bezoeker bijvoorbeeld het symbool “@” in het e-mailadres vergeet op te nemen, wordt het bericht geretourneerd dat de informatie die de gebruiker heeft ingevoerd, ongeldig is.
In het volgende voorbeeld ziet u de diverse toestanden van een widget tekstveld voor validatie:
A. Widget tekstveld, tip geactiveerd B. Widget tekstveld, toestand Geldig C. Widget tekstveld, toestand Ongeldig D. Widget tekstveld, toestand Vereist
De widget tekstveld voor validatie kent een aantal toestanden (bijvoorbeeld geldig, ongeldig, verplichte waarde enzovoort). Al naargelang de gewenste validatieresultaten kunt u de eigenschappen van deze toestanden wijzigen met de eigenschappencontrole. Een widget tekstveld voor validatie kan op verschillende momenten valideren, bijvoorbeeld op het moment dat de bezoeker buiten de widget klikt, tijdens het invoeren van de informatie of wanneer de bezoeker het formulier probeert te verzenden.
Status bij openen
De toestand van de widget wanneer de pagina in de browser wordt geladen of wanneer de gebruiker het formulier opnieuw instelt.
Toestand Focus
De toestand van de widget wanneer de gebruiker de invoegpositie in de widget plaatst.
Toestand Geldig
De toestand van de widget wanneer de gebruiker informatie correct heeft ingevoerd en het formulier kan worden verzonden.
Toestand Ongeldig
De toestand van de widget wanneer de gebruiker tekst in een ongeldige notatie heeft ingevoerd. (Bijvoorbeeld 07 voor het jaartal in plaats van 2007).
Toestand Vereist
De toestand van de widget wanneer de gebruiker geen tekst heeft ingevoerd in een verplicht tekstveld.
Toestand Minimum aantal tekens
De toestand van de widget wanneer de gebruiker minder tekens heeft ingevoerd dan het minimum aantal tekens dat verplicht is voor het tekstveld.
Toestand Maximum aantal tekens
De toestand van de widget wanneer de gebruiker meer tekens heeft ingevoerd dan het maximum aantal tekens dat verplicht is voor het tekstveld.
Toestand minimumwaarde
De toestand van de widget wanneer de gebruiker een waarde heeft ingevoerd die kleiner is dan de waarde die in het tekstveld is vereist. (Is van toepassing op validaties van het gegevenstype Geheel getal en reëel getal.)
Toestand Maximumwaarde
De toestand van de widget wanneer de gebruiker een waarde heeft ingevoerd die groter is dan de waarde die in het tekstveld is vereist. (Is van toepassing op validaties van het gegevenstype Geheel getal en reëel getal.)
Wanneer een widget tekstveld voor validatie na een gebruikersactie één van deze toestanden krijgt, past de Spry-frameworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor de widget. Als een gebruiker bijvoorbeeld een formulier verstuurt waarin geen tekst is ingevuld in een verplicht tekstveld, past Spry een klasse op de widget toe die ervoor zorgt dat het foutbericht “Een waarde is verplicht” wordt weergegeven. De regels die de opmaak en weergavetoestanden van foutberichten bepalen, vindt u in het CSS-bestand bij de widget, SpryValidationTextField.css.
De standaard-HTML voor de widget tekstveld voor validatie bevindt zich gewoonlijk in een formulier, en bevat een containertag <span> met daarbinnen de <input>-tag van het tekstveld. De HTML voor de widget tekstveld voor validatie bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget.
Voor een uitvoerige uitleg van de werking van de widget tekstveld voor validatie, waaronder een volledige anatomie van de code van de widget tekstveld voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprytextfield_nl.
De widget tekstveld voor validatie invoegen en bewerken
De widget tekstveld voor validatie invoegen
-
-
Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.
Opmerking:
U kunt een widget tekstveld voor validatie ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.
Een validatietype en -notatie opgeven
U kunt voor de widget tekstveld voor validatie verschillende validatietypen opgeven. U kunt bijvoorbeeld het validatietype creditcard opgeven als in het tekstveld creditcardnummers worden ingevoerd.
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer een validatietype in het menu Type.
-
Selecteer indien van toepassing een notatie in het pop-upmenu Notatie.
Bij de meeste validatietypen verwacht het tekstveld een standaardnotatie. Als u bijvoorbeeld het validatietype Geheel getal op een tekstveld toepast, wordt de widget alleen gevalideerd als de gebruiker een getal in het tekstveld invoert. Bij sommige validatietypen kunt u echter kiezen welke notatie door het tekstveld wordt geaccepteerd. In de volgende tabel vindt u een overzicht van validatietypen en notaties die beschikbaar zijn via de eigenschappencontrole:
Validatietype |
Opmaak |
|---|---|
Geen |
Geen specifieke notatie vereist. |
Geheel getal |
Tekstveld accepteert alleen getallen. |
E-mailadres |
Tekstveld accepteert e-mailadressen die een @ en een punt (.) bevatten, die beide worden voorafgegaan en worden gevolgd door minstens één letter. |
Datum |
Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. |
Tijd |
Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. (“tt” staat voor de notatie am/pm, en “t” staat voor de notatie a/p.) |
Creditcard |
Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. U kunt ervoor kiezen alle creditcards te accepteren of u kunt een bepaalde soort creditcard opgeven (MasterCard, Visa, enzovoort). Het tekstveld accepteert geen spaties in creditcardnummer, dus 4321 3456 4567 4567. |
Postcode |
Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. |
Telefoonnummer |
Tekstveld accepteert telefoonnummers in de Amerikaanse en Canadese notatie (000) 000-0000, of een aangepaste notatie. Als u voor een aangepaste notatie kiest, voert u de notatie, bijvoorbeeld 000-0000000 in het tekstvak Patroon in. |
SOFI-nummer |
Tekstveld accepteert sofinummers met de notatie 000-00-0000. Als u een andere notatie wilt gebruiken, selecteert u Aangepast als validatietype en geeft u een patroon op. Het mechanisme voor patroonvalidatie accepteert alleen ASCII-tekens. |
Valuta |
Tekstveld accepteert valuta, opgemaakt als 1,000,000.00 of 1.000.000,00. |
Reëel-getal/wetenschappelijke notatie |
Valideert diverse soorten getallen; gehele getallen (bijvoorbeeld, 1); zwevende waarden (bijvoorbeeld 12.123) en zwevende waarden in de wetenschappelijke notatie (bijvoorbeeld 1.212e+12, 1.221e-12 waarbij e een macht van 10 is). |
IP-adres |
Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. |
URL |
Tekstveld accepteert URL's die zijn opgemaakt als http://xxx.xxx.xxx of ftp://xxx.xxx.xxx. |
Aangepast |
Hiermee geeft u een aangepast validatietype en -notatie. Voer het notatiepatroon (en -tip indien gewenst) in de eigenschappencontrole in. Het mechanisme voor patroonvalidatie accepteert alleen ASCII-tekens. |
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 tekstveld voor validatie in het documentvenster.
-
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 klikt.
Wijzigen
Valideert terwijl de gebruiker tekst in het tekstveld wijzigt.
Verzenden
Valideert op het moment dat de gebruiker het formulier probeert te verzenden. De optie Verzenden is standaard geselecteerd en kan niet worden uitgeschakeld.
Een minimum en maximum aantal tekens opgeven
Deze optie is alleen beschikbaar voor de validatietypen Geen, Geheel getal, E-mailadres en URL.
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een getal in het vak Min. tekens en Max. tekens in. Als u in het vak Min. tekens bijvoorbeeld 3 invoert, valideert de widget alleen als de gebruikers minstens drie tekens heeft ingevoerd.
Minimum- en maximumwaarden opgeven
Deze optie is alleen beschikbaar voor de validatietypen Geheel getal, Tijd, Valuta en Reëel-getal/wetenschappelijke notatie.
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een waarde in het vak Min. waarde en Max. waarde in. Als u in het vak Min. waarde bijvoorbeeld 3 invoert, valideert de widget alleen als de gebruiker het getal 3 of hoger (4, 5, 6 enzovoort) in het tekstveld invoert.
Widgettoestanden weergeven in de ontwerpweergave
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
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.
Verplichte status van een tekstveld wijzigen
Standaard moeten alle widgets Tekstveld voor validatie die u met Dreamweaver invoegt, door de gebruiker worden ingevuld wanneer de widget wordt gepubliceerd op een webpagina. U kunt het invullen van de tekstvelden voor de gebruiker echter ook optioneel maken.
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit.
Een tip voor een tekstveld maken
Omdat er voor tekstvelden zoveel verschillende notaties zijn, is het handig om uw gebruikers een tip te geven met betrekking tot de notatie die ze moeten invoeren. Een tekstveld dat is ingesteld met het validatietype Telefoonnummer accepteert bijvoorbeeld alleen telefoonnummers in de vorm (000) 000-0000. U kunt deze voorbeeldnummers als een tip instellen zodat in het tekstveld de juiste notatie wordt weergegeven wanneer een gebruiker de pagina in een browser laadt.
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een tip in het tekstvak Tip in.
Ongeldige tekens blokkeren
U kunt voorkomen dat gebruikers ongeldige tekens in een widget tekstveld voor validatie invoeren. Als u deze optie bijvoorbeeld inschakelt voor een widget waarvoor het validatietype Geheel getal is ingesteld, verschijnt niets in het tekstveld als de gebruiker een letter probeert te typen.
-
Selecteer een widget tekstveld voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie Patroon afdwingen.
De widget tekstveld voor validatie aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget tekstveld voor validatie kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget tekstveld voor validatie wijzigen en een widget maken die naar uw eigen smaak is opgemaakt. Voor een geavanceerdere lijst met opmaaktaken gaat u naar www.adobe.com/go/learn_dw_sprytextfield_custom_nl.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationTextField.css. Wanneer u een widget Spry-tekstveld voor validatie maakt, slaat Dreamweaver het bestand SpryValidationTextField.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 tekstveld voor validatie 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.
Tekst opmaken van foutbericht voor widget tekstveld voor validatie
Standaard worden foutberichten voor de widget tekstveld voor validatie weergegeven in een kader met een rode rand van 1 pixel dik.
-
Als u de tekstopmaak van de foutberichten voor een widget tekstveld voor validatie 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
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg kleur: #CC3333; rand: 1px solid #CC3333;
De achtergrondkleur wijzigen van de widget tekstveld voor validatie
-
Als u de achtergrondkleuren van de widget tekstveld voor validatie in de diverse toestanden 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
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
Achtergrondkleur van widget in toestand Ongeldig
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
Achtergrondkleur van widget bij focus
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
