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 groep met validatiekeuzerondjes

De widget groep met validatiekeuzerondjes is een groep keuzerondjes met validatieondersteuning voor de selectie. De widget bevestigt de selectie van een keuzerondje in de groep.

Hierna volgt een voorbeeld van een widget groep met validatiekeuzerondjes in verschillende staten.

Een Spry-widget Groep met validatiekeuzerondjes in diverse toestanden
Een Spry-widget Groep met validatiekeuzerondjes in diverse toestanden

A. Foutberichten bij de widget groep met validatiekeuzerondjes B. Widget groep met validatiekeuzerondjes 

De widget groep met validatiekeuzerondjes bevat naast de oorspronkelijke staat nog drie staten: geldig, ongeldig en vereiste waarde. U kunt de eigenschappen van deze staten wijzigen door het bijbehorende CSS-bestand te bewerken (SpryValidationRadio.css), afhankelijk van de gewenste validatieresultaten. Een widget groep met validatiekeuzerondjes kan op verschillende momenten valideren: wanneer de gebruiker buiten de widget klikt, terwijl de gebruiker selecties maakt of wanneer de gebruiker 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 Geldig

Wanneer de gebruiker een selectie maakt en het formulier kan worden verzonden.

Toestand Vereist

Wanneer de gebruiker geen vereiste selectie heeft gemaakt.

Toestand Ongeldig

Wanneer de gebruiker een keuzerondje selecteert waarvan de waarde niet acceptabel is.

Wanneer een widget groep met validatiekeuzerondjes door een handeling van een gebruiker een van deze staten aanneemt, past de Spry-frameworklogica tijdens de uitvoering een specifieke CSS-klasse toe op de HTML-container voor de widget. Als een gebruiker bijvoorbeeld een formulier probeert te verzenden, maar geen selecties heeft gemaakt, past Spry een klasse op de widget toe waardoor het foutbericht “Selecteer een optie” wordt weergegeven. De regels die de opmaak en weergavestaten van foutberichten bepalen, staan in het bestand dat bij de widget hoort, SpryValidationRadio.css.

De standaard-HTML-code voor de widget groep met validatiekeuzerondjes, meestal in een formulier, bestaat uit een container span-tag om de tag input type="radio" van de groep keuzerondjes heen. De HTML-code voor de widget Groep met validatiekeuzerondjes bevat ook script-tags in de koptekst van het document en na de HTML-code van de widget.

Zie www.adobe.com/go/learn_dw_spryradio_nl voor een uitgebreidere uitleg van de werking van de widget Groep met validatiekeuzerondjes, inclusief een volledige anatomie van de code van de widget Groep met validatiekeuzerondjes.

De widget groep met validatiekeuzerondjes invoegen en bewerken

De widget groep met validatiekeuzerondjes invoegen

  1. Selecteer Invoegen > Spry > Groep met Spry-validatiekeuzerondjes.
  2. Typ in het tekstvak Naam een naam voor de groep keuzerondjes.
  3. Keuzerondjes toevoegen aan of verwijderen uit de groep door op de plusknop (+) of minknop (-) te klikken.
  4. Klik in de kolom Label op de naam van een keuzerondje om het bewerkbaar te maken en wijs een unieke naam toe aan elk keuzerondje.
  5. Klik in de kolom Waarde op een waarde om deze bewerkbaar te maken en wijs een unieke waarde toe aan elk keuzerondje.
  6. (Optioneel) Klik op een keuzerondje of op de bijbehorende waarde om een specifieke rij te selecteren en klik op de pijl omhoog of omlaag om de rij naar boven of naar beneden te verplaatsen.
  7. Selecteer een lay-outtype voor de groep keuzerondjes.

    Regeleinden

    Plaatst elk keuzerondje op een afzonderlijke regel met behulp van regeleinden (br-tags).

    Tabel

    Plaatst elk keuzerondje op een afzonderlijke regel met behulp van de individuele rijen in de tabel (tr-tags).

  8. Klik op OK.

Opmerking:

U kunt een widget groep keuzerondjes 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 het opgeven van selecties of wanneer de gebruiker het formulier probeert te verzenden.

  1. Selecteer een widget groep validatiekeuzerondjes in het documentvenster door op de blauwe tab te klikken.
  2. 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 zodra de gebruiker buiten de groep keuzerondjes 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

  1. Selecteer een widget groep validatiekeuzerondjes in het documentvenster door op de blauwe tab te klikken.
  2. Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop-upmenu Voorvertoningsstatus. Selecteer bijvoorbeeld Bij openen om de widget in de status bij openen weer te geven.

Status wijziging vereist voor keuzerondjes

Standaard moet de gebruiker bij een widget groep met validatiekeuzerondjes een selectie maken alvorens het formulier te verzenden. U kunt selecties echter optioneel maken voor de gebruiker.

  1. Selecteer een widget groep validatiekeuzerondjes in het documentvenster door op de blauwe tab te klikken.
  2. Schakel in de eigenschappencontrole (Venster > Eigenschappen) de optie Vereist in.

Een lege of ongeldige waarde opgeven

U kunt een waarde opgeven die als leeg of ongeldig wordt geregistreerd als de gebruiker een keuzerondje selecteert dat aan een van die waarden is gekoppeld. Als de gebruiker een keuzerondje met een lege waarde selecteert, geeft de browser het foutbericht “Selecteer een optie.” Als de gebruiker een keuzerondje met een ongeldige waarde selecteert, geeft de browser het foutbericht “Selecteer een geldige waarde.”

Widget groep met keuzerondjes met een keuzerondje met een lege waarde.
Widget groep met keuzerondjes met een keuzerondje met een lege waarde.

  1. Selecteer het keuzerondje in de widget groep met keuzerondjes dat u wilt gebruiken als leeg of ongeldig keuzerondje. Wanneer u lege of ongeldige waarden voor de widget opgeeft, moet u eerst bijbehorende keuzerondjes maken waaraan die waarden al zijn toegewezen.
  2. Wijs in de eigenschappencontrole voor keuzerondjes (Venster > Eigenschappen) aan het keuzerondje een geselecteerde waarde toe. Als u een keuzerondje met een lege waarde wilt maken, typt u geen in het vak Ingeschakelde waarde. Als u een keuzerondje met een ongeldige waarde wilt maken, typt u ongeldig in het vak Ingeschakelde waarde.
  3. Selecteer de gehele widget groep met validatiekeuzerondjes door op de blauwe tab van de widget te klikken.
  4. Geef in de eigenschappencontrole lege of ongeldige waarden op. Als u een widget wilt maken die het foutbericht voor lege waarden 'Selecteer een optie' weergeeft, typt u geen in het vak Lege waarde. Als u een widget wilt maken die het foutbericht voor ongeldige waarden 'Selecteer een geldige waarde' weergeeft, typt u ongeldig in het vak Ongeldige waarde.

    Zowel aan het keuzerondje zelf als aan de widget groep met keuzerondjes moeten de waarden geen of ongeldig zijn toegewezen, anders worden deze berichten niet juist weergegeven.

De widget groep keuzerondjes aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget groep met validatiekeuzerondjes kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget groep met validatiekeuzerondjes wijzigen en een widget maken die naar uw eigen smaak is opgemaakt. Zie www.adobe.com/go/learn_dw_spryradio_custom_nl voor een uitgebreidere lijst met opmaaktaken.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationRadio.css. Dreamweaver slaat het bestand SpryValidationRadio.css op in de map SpryAssets van uw site wanneer u een widget Groep met Spry-validatiekeuzerondjes maakt. 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 groep met validatiekeuzerondjes 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 groep met validatiekeuzerondjes opmaken (algemene instructies)

  1. Open het bestand SpryValidationRadio.css.

  2. 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 groep keuzerondjes wilt wijzigen, bewerkt u de radioRequiredState-regel in het bestand SpryValidationRadio.css.

  3. Breng de gewenste wijzigingen in de CSS-regel aan en sla het bestand op.

Het bestand SpryValidationRadio.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 het foutbericht voor widget groep met validatiekeuzerondjes

Standaard worden foutberichten voor de widget groep met validatiekeuzerondjes rood weergegeven met een effen rand van 1 pixel breed om de tekst heen.

  1. Als u de tekstopmaak van de foutberichten voor de widget groep met validatiekeuzerondjes wilt wijzigen, kunt u de desbetreffende CSS-regel aan de hand van de volgende tabel vinden. Vervolgens wijzigt 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

    .radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg

    kleur: #CC3333; rand: 1px solid #CC3333;

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid