Kies Invoegen > Spry > Spry-validatie selecteren.
Laatst bijgewerkt op
May 02, 2021 11:27:20 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 Validatie selecteren
Een Spry-widget validatie selecteren is een vervolgkeuzemenu dat geldige of ongeldige toestanden weergeeft wanneer de gebruiker een selectie maakt. U kunt bijvoorbeeld een widget validatie selecteren invoegen die een lijst met toestanden bevat, die in verschillende secties zijn gegroepeerd en met horizontale lijnen zijn gescheiden. Als de gebruiker per ongeluk een van de scheidingslijnen selecteert in plaats van een van de toestanden, retourneert de widget Validatie selecteren het bericht dat de selectie van de gebruiker ongeldig is.
In het volgende voorbeeld ziet u een opengeklapte widget validatie selecteren evenals de dichtgeklapte vorm van de widget in diverse toestanden:
A. Widget validatie selecteren bij focus B. Widget selecteren, toestand Geldig C. Widget selecteren, toestand Vereist D. Widget selecteren, toestand Ongeldig
De widget Validatie selecteren 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 Validatie selecteren kan op verschillende momenten valideren, bijvoorbeeld op het moment dat de gebruiker buiten de widget klikt, tijdens het opgeven van een selectie of wanneer de gebruiker 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 op de widget klikt.
Toestand Geldig
De toestand van de widget wanneer de gebruiker een geldig item heeft geselecteerd en het formulier kan worden verzonden.
Toestand Ongeldig
De toestand van de widget wanneer de gebruiker een ongeldig item heeft geselecteerd.
Toestand Vereist
De toestand van de widget wanneer de gebruiker geen geldig item heeft geselecteerd.
Wanneer een widget validatie selecteren na een gebruikersactie één van deze toestanden heeft gekregen, past de Spry-frameworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor de widget. Als een gebruiker bijvoorbeeld een formulier probeert te verzenden zonder dat er in het menu is geselecteerd, past Spry een klasse op de widget toe die het foutbericht “Selecteer een item” weergeeft. De regels die de opmaak en weergavetoestanden van foutberichten bepalen, vindt u in het CSS-bestand bij de widget, SpryValidationSelect.css.
De standaard-HTML voor de widget Validatie selecteren bevindt zich gewoonlijk in een formulier, en bevat een containertag <span> met daarbinnen de <select>-tag van het tekstgebied. De HTML voor de widget Validatie selecteren 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 Validatie selecteren, waaronder een volledige anatomie van de code van de widget Validatie selecteren, gaat u naar www.adobe.com/go/learn_dw_spryselect_nl.
De widget validatie selecteren invoegen en bewerken
De widget Validatie selecteren invoegen
-
-
Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.
-
Ga naar de codeweergave en voeg option-tags toe die menu-items en -waarden bevatten. Dit wordt niet automatisch in Dreamweaver gedaan. Zie het vorige onderwerp voor meer informatie.
Opmerking:
U kunt een widget validatie selecteren 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 validatie selecteren 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 de widget klikt.
Wijzigen
Valideert wanneer de gebruiker selecties maakt.
Verzenden
Valideert op het moment dat de gebruiker het formulier probeert te verzenden. De optie Verzenden is standaard geselecteerd en kan niet worden uitgeschakeld.
Widgettoestanden weergeven in de ontwerpweergave
-
Selecteer een widget validatie selecteren 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.
Lege waarden verbieden of toestaan
Standaard moeten gebruikers voor alle widgets Validatie selecteren die u met Dreamweaver invoegt, een menu-item selecteren voordat de widget op een webpagina wordt gepubliceerd. U kunt deze optie echter uitschakelen.
-
Selecteer een widget validatie selecteren in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Lege waarden niet toestaan in of uit.
Een ongeldige waarde opgeven
U kunt opgeven dat een waarde als ongeldig wordt geregistreerd als de gebruiker een menu-item selecteert dat niet aan die waarde is gekoppeld. Als u bijvoorbeeld opgeeft dat -1 een ongeldige waarde is en u de waarde als volgt toekent aan een option-tag, retourneert de widget een foutbericht als de gebruiker dat menu-item selecteert.
<option value="-1"> ------------------- </option>
-
Selecteer een widget validatie selecteren in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer in het vak Ongeldige waarde een getal in dat u als een ongeldige waarde wilt gebruiken.
De widget Validatie selecteren aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget validatie selecteren kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels wijzigen voor de widget Validatie selecteren en een widget maken die naar uw eigen smaak is opgemaakt.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationSelect.css. Wanneer u een widget Spry-validatie selecteren maakt, slaat Dreamweaver het bestand SpryValidationSelect.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 selecteren 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 validatie selecteren
Standaard worden foutberichten voor de widget Validatie selecteren weergegeven in een kader met een rode rand van 1 pixel dik.
-
Als u de tekstopmaak van de foutberichten voor een widget validatie selecteren 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:
Op te maken tekst
Relevante CSS-regel
Relevante eigenschappen om te wijzigen
Tekst van foutbericht
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg kleur: #CC3333; rand: 1px solid #CC3333;
De achtergrondkleur wijzigen van de widget Validatie selecteren
-
Als u de achtergrondkleuren van de widget Validatie selecteren 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
.selectValidState select, select.selectValidState background-color: #B8F5B1;
Achtergrondkleur van widget in toestand Ongeldig
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
Achtergrondkleur van widget bij focus
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
Verwante informatie
Aanmelden bij je account