Kies Invoegen > Spry > Spry-validatie voor tekstgebied.
Laatst bijgewerkt op
May 02, 2021 11:27:19 PM GMT
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 tekstgebied voor validatie
Een Spry-widget tekstgebied voor validatie is een tekstgebied dat alleen geldige of ongeldige toestanden weergeeft wanneer de gebruiker enkele regels tekst invoert. Als het tekstgebied een verplicht veld is en de gebruiker geen tekst invoert, retourneert de widget het bericht dat een waarde verplicht.
In het volgende voorbeeld ziet u de diverse toestanden van een widget tekstgebied voor validatie:
A. Teller Resterende tekens B. Widget tekstveld in focus, toestand Maximum aantal tekens C. Widget tekstveld in focus, geldige toestand D. Widget tekstgebied, toestand Vereist E. Teller Ingevoerde tekens
De widget tekstgebied 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 tekstgebied voor validatie kan op verschillende momenten valideren, bijvoorbeeld op het moment dat de gebruiker 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 Vereist
De widgettoestand wanneer de gebruiker geen tekst heeft ingevoerd.
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 tekstgebied.
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 tekstgebied.
Wanneer een widget tekstgebied 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 tekstgebied, 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, SpryValidationTextArea.css.
De standaard-HTML voor de widget tekstgebied voor validatie bevindt zich gewoonlijk in een formulier, en bevat een containertag <span> met daarbinnen de <textarea>-tag van het tekstgebied. De HTML voor de widget tekstgebied 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 tekstgebied voor validatie, waaronder een volledige anatomie van de code van de widget tekstgebied voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprytextarea_nl.
De widget tekstgebied voor validatie invoegen en bewerken
De widget tekstgebied voor validatie invoegen
-
-
Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.
Opmerking:
U kunt een widget tekstgebied voor validatie ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.
Opgeven wanneer validatie wordt uitgevoerd
U kunt opgeven wanneer de validatie wordt uitgevoerd: op het moment dat de gebruiker buiten de widget klikt, tijdens de invoer of wanneer de gebruiker het formulier probeert te verzenden.
-
Selecteer een widget tekstgebied voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de Valideren bij-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
-
Selecteer een widget tekstgebied 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 20 invoert, valideert de widget alleen als de gebruikers minstens 20 tekens in het tekstgebied heeft ingevoerd.
Een tekenteller toevoegen
U kunt een tekenteller toevoegen zodat de gebruikers kunnen zien hoeveel tekens ze al hebben getypt en hoeveel tekens er nog in het tekstgebied ingevoerd kunnen worden. Wanneer u een tekenteller toevoegt, wordt deze standaard buiten de rechterbenedenhoek van de widget weergegeven.
-
Selecteer een widget tekstgebied voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Aantal tekens of Resterende tekens in.Opmerking:
De optie Resterende tekens is alleen beschikbaar als u eerder hebt ingesteld hoeveel tekens maximaal zijn toegestaan.
Widgettoestanden weergeven in de ontwerpweergave
-
Selecteer een widget tekstgebied 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 tekstgebied wijzigen
Standaard moeten alle widgets Tekstgebied voor validatie die u met Dreamweaver invoegt, door de gebruiker worden ingevuld wanneer de widget wordt gepubliceerd op een webpagina. U kunt de validatie van tekstvelden echter optioneel maken.
-
Selecteer een widget tekstgebied voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit.
Een tip voor een tekstgebied maken
U kunt een tip aan het tekstgebied toevoegen, bijvoorbeeld 'Typ hier uw beschrijving', zodat de gebruiker weet wat voor informatie in het tekstgebied moet worden ingevoerd. In het tekstgebied wordt de tekst van de tip weergegeven wanneer de pagina in een browser wordt geladen.
-
Selecteer een widget tekstgebied voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een tip in het tekstvak Tip in.
Extra tekens blokkeren
U kunt voorkomen dat gebruikers meer tekens invoeren dan maximaal is toegestaan in een widget tekstgebied voor validatie. Als u deze optie bijvoorbeeld voor een widget selecteert zodat niet meer dan 20 tekens mogen worden ingevoerd, kan de gebruiker in het tekstgebied niet meer dan 20 tekens invoeren.
-
Selecteer een widget tekstgebied voor validatie in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Extra tekens blokkeren in.
De widget tekstgebied voor validatie aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget tekstgebied voor validatie kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget tekstgebied 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_sprytextarea_custom_nl.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationTextArea.css. Wanneer u een widget Spry-tekstgebied voor validatie maakt, slaat Dreamweaver het bestand SpryValidationTextArea.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 tekstgebied 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 tekstgebied voor validatie
Standaard worden foutberichten voor de widget tekstgebied voor validatie weergegeven in een kader met een rode rand van 1 pixel dik.
-
Als u de tekstopmaak van de foutberichten voor een widget tekstgebied 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
.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg kleur: #CC3333; rand: 1px solid #CC3333;
De achtergrondkleur wijzigen van de widget tekstgebied voor validatie
-
Als u de achtergrondkleuren van de widget tekstgebied 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 achtergrondkleur
Relevante CSS-regel
Relevante eigenschap om te wijzigen
Achtergrondkleur van widget in toestand Geldig
.textareaValidState textarea, textarea.textareaValidState background-color: #B8F5B1;
Achtergrondkleur van widget in toestand Ongeldig
textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea background-color: #FF9F9F;
Achtergrondkleur van widget bij focus
.textareaFocusState textarea, textarea.textareaFocusState background-color: #FFFFCC;
Verwante informatie
Aanmelden bij je account