Kode

Fejlmeddelelser

Hvad er dit fulde navn? Skriv dit fulde navn, og adskil for- og efternavne med mellemrum, fx Christian Emil Vestergaard Christiansen

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group form-error">
    <label class="form-label " for="form-error">
        Hvad hedder dit kursus?
    </label>
    <span class="form-hint" id="form-error-hint">
        Fx: Skriv godt
    </span>
    <span class="form-error-message" id="form-error-error">
        <span class="sr-only">Fejl:</span> Giv dit kursus et navn
    </span>
    <input class="form-input " required id="form-error" value=""
        name="form-error" type="text" aria-invalid="true"
        aria-describedby="form-error-hint form-error-error">
</div>

For at hjælpe skærmlæsere tilføjes en skjult tekst “Fejl:” foran fejlmeddelelsen. Brugere af skærmlæser vil da høre “Fejl: Datoen for udløb af dit pas bør være i fortiden.” Teksten er skjult i et <span> element med klassen sr-only.

Fejlmeddelelsen vises også i fejlopsummeringen øverst på siden.

Varianter

Tjekboks

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset aria-describedby="example-nationalitet-error">
        <legend class="h5">Hvad er din nationalitet?</legend>
        <span class="form-error-message"
            id="example-nationalitet-error"><span
                class="sr-only">Fejl:</span> Angiv om du er dansk, svensk
            eller anden nationalitet</span>
        <ul class="nobullet-list">
            <li>
                <input id="nationalitet1" type="checkbox"
                    name="nationalitet" value="dansk"
                    class="form-checkbox  checkbox-large " />
                <label for="nationalitet1" class="">Dansk</label>
            </li>
            <li>
                <input id="nationalitet2" type="checkbox"
                    name="nationalitet[]" value="svensk"
                    class="form-checkbox  checkbox-large " />
                <label for="nationalitet2" class="">Svensk</label>
            </li>
            <li>
                <input id="nationalitet3" type="checkbox"
                    name="nationalitet[]" value="anden"
                    class="form-checkbox  checkbox-large " />
                <label for="nationalitet3" class="">Anden
                    nationalitet</label>
            </li>
        </ul>
    </fieldset>
</div>

Radioknap

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset aria-describedby="example-radiobutton-error">
        <legend class="h5">Sagen handler om</legend>
        <span class="form-error-message"
            id="example-radiobutton-error"><span
                class="sr-only">Fejl:</span> Vælg hvad sagen handler
            om</span>
        <ul class="nobullet-list">
            <li>
                <input id="sagen-omhandler-ulykkesforsikring" type="radio"
                    name="sagen-omhandler" value="ulykkesforsikring"
                    class="form-radio  radio-large " />
                <label for="sagen-omhandler-ulykkesforsikring"
                    id="form-label-sagen-omhandler-ulykkesforsikring"
                    class="">Ulykkesforsikring (ASL §81) </label>

            </li>
            <li>
                <input id="sagen-omhandler-erstatningsansvar" type="radio"
                    name="sagen-omhandler" value="erstatningsansvar"
                    class="form-radio  radio-large " />
                <label for="sagen-omhandler-erstatningsansvar"
                    id="form-label-sagen-omhandler-erstatningsansvar"
                    class="">Erstatningsansvar (ASL §10) </label>

            </li>
            <li>
                <input id="sagen-omhandler-forsikringsselskab" type="radio"
                    name="sagen-omhandler" value="forsikringsselskab"
                    class="form-radio  radio-large " />
                <label for="sagen-omhandler-forsikringsselskab"
                    id="form-label-sagen-omhandler-forsikringsselskab"
                    class="">Forsikringsselskab (ASL §10) </label>

            </li>
        </ul>
    </fieldset>
</div>

Datoangivelse

Vis dette eksempel i et nyt vindue

<div class="form-group  form-error  ">
    <fieldset
        aria-dsecribedby="example-date-field-hint example-date-field-error">
        <legend class="form-label">Hvornår blev dit pas udstedt?</legend>
        <span class="form-hint" id="example-date-field-hint">Fx: 05 12
            2018</span>
        <span class="form-error-message "
            id="example-date-field-error"><span
                class="sr-only">Fejl:</span> Datoen kan ikke være i
            fremtiden</span>
        <div class="date-group js-calendar-group mt-3">
            <div class="form-group form-group-day">
                <label class="form-label" for="date-day">Dag</label>
                <input class="form-input js-calendar-day-input"
                    id="date-day" value="01" type="tel" data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv dag på måneden som tal" />
            </div>
            <div class="form-group form-group-month">
                <label class="form-label" for="date-month">Måned</label>
                <input class="form-input js-calendar-month-input"
                    id="date-month" value="12" type="tel" data-min="1"
                    data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv månedens nummer" />
            </div>
            <div class="form-group form-group-year ">
                <label class="form-label" for="date-year">År</label>
                <input class="form-input js-calendar-year-input"
                    id="date-year" value="2076" type="tel" data-min="1900"
                    data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$"
                    title="Indskriv årstal" />
            </div>

        </div>
    </fieldset>
</div>