Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Fejlmeddelelser

Eksempel på fejlmeddelelser
Fejl: Skriv dit fulde navn, og adskil for- og efternavne med mellemrum, fx Anders Andersen

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<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 type="text" id="form-error" name="form-error" class="form-input"
        aria-invalid="true" aria-describedby="form-error-hint form-error-error " required>
</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

Accordions

Eksempel på accordion med fejl
<ul class="accordion">
    <li>
        <h3>
            <button class="accordion-button accordion-error " aria-expanded="true"
                aria-describedby="error-example-accordion1-error"
                aria-controls="error-example-accordion1">
                Lorem ipsum dolor sit amet
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#highlight-off"></use></svg>
                </span>
            </button>
        </h3>
        <div id="error-example-accordion1" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert" id='error-example-accordion1-error'>
                <div class="alert-body">
                    <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium.</p>
                </div>
            </div>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Datofelter

Eksempel på datofelter med fejlmeddelelse
<div class="form-group form-error">
    <fieldset
        aria-describedby="date-input-error-example-hint date-input-error-example-error ">
        <legend class="form-label">
            Hvornår blev dit pas udstedt?
        </legend>
        <span class="form-hint" id="date-input-error-example-hint">For eksempel: 05 12
            2018</span>
        <span class="form-error-message" id="date-input-error-example-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-input-error-example-day">Dag</label>

                <input type="tel" id="date-input-error-example-day"
                    class="form-input js-calendar-day-input" value="01" required data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$" title="Indtast dag på måneden som tal">
            </div>

            <div class="form-group form-group-month">
                <label class="form-label" for="date-input-error-example-month">Måned</label>

                <input type="tel" id="date-input-error-example-month"
                    class="form-input js-calendar-month-input" value="12" required
                    data-min="1" data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$" title="Indtast månedens nummer">
            </div>

            <div class="form-group form-group-year">
                <label class="form-label" for="date-input-error-example-year">År</label>

                <input type="tel" id="date-input-error-example-year"
                    class="form-input js-calendar-year-input" value="2076" required
                    data-min="1900" data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$" title="Indtast årstal">
            </div>

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

Datovælger

Eksempel på datovælger med fejlmeddelelse
<div class="form-group form-error">
    <label class="form-label" for="datepicker-example-error1">Dato for aftale</label>

    <span class="form-error-message" id="datepicker-example-error1-error">
        <span class="sr-only">Fejl: </span>Vælg en dato
    </span>
    <div class="date-picker">
        <input type="text" id="datepicker-example-error1" name="datepicker-example-error1"
            class="form-input" aria-invalid="true"
            aria-describedby="datepicker-example-error1-error" required>
    </div>
</div>
Eksempel på dropdown med fejlmeddelelse
<div class="form-group form-error">
    <label class="form-label" for="options-error">Dropdown (select)</label>

    <span class="form-error-message" id="options-error-error">
        <span class="sr-only">Fejl: </span>Vælg en mulighed
    </span>
    <select class="form-select" name="options-error" id="options-error" aria-invalid="true"
        aria-describedby="options-error-error" required>
        <option value="option1">Ingen mulighed valgt</option>
        <option value="option2">Mulighed 1</option>
        <option value="option3">Mulighed 2</option>
        <option value="option4">Mulighed 3</option>
    </select>
</div>

Inputfelt

Eksempel på inputfelt med fejlmeddelelse
<div class="form-group form-error">
    <label class="form-label" for="fullname-error-example">Hvad er dit fulde navn?</label>

    <span class="form-error-message" id="fullname-error-example-error">
        <span class="sr-only">Fejl: </span>Skriv dit fulde navn, og adskil for- og efternavne
        med mellemrum, fx Anders Andersen
    </span>

    <input type="text" id="fullname-error-example" name="fullname-error-example"
        class="form-input" aria-invalid="true"
        aria-describedby="fullname-error-example-error " required>
</div>

Inputfelt med suffix

Eksempel på inputfejl med suffix og fejlmeddelelse
<div class="form-group form-error">
    <label class="form-label" for="input-pris-error">Pris i 1000 kr.</label>

    <span class="form-error-message" id="input-pris-error-error">
        <span class="sr-only">Fejl: </span>Angiv en pris
    </span>
    <div class="form-input-wrapper form-input-wrapper--suffix">

        <input type="number" id="input-pris-error" name="input-pris-error"
            class="form-input input-char-11" value="123" aria-invalid="true"
            aria-describedby="input-pris-error-error " required>
        <div class="form-input-suffix" aria-hidden="true">000 kr</div>
    </div>
</div>

Radioknapper

Eksempel på radioknapper med fejlmeddelelse
<div class="form-group form-error">
    <fieldset role="radiogroup" aria-describedby="radiogroup-error-error "
        aria-invalid="true">
        <legend class="form-label">
            Sagen handler om
        </legend>

        <span class="form-error-message" id="radiogroup-error-error">
            <span class="sr-only">Fejl: </span>Vælg hvad sagen handler om
        </span>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option1" name="sagen-omhandler"
                class="form-radio radio-large" value="ulykkesforsikring">
            <label class="form-label" for="radiogroup-error-option1">Ulykkesforsikring</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option2" name="sagen-omhandler"
                class="form-radio radio-large" value="erstatningsansvar">
            <label class="form-label" for="radiogroup-error-option2">Erstatningsansvar</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option3" name="sagen-omhandler"
                class="form-radio radio-large" value="forsikringsselskab">
            <label class="form-label"
                for="radiogroup-error-option3">Forsikringsselskab</label>

        </div>

    </fieldset>
</div>

Tekstområde

Eksempel på tekstområde med fejlmeddelelse
<div class="form-group form-error">
    <label class="form-label" for="textarea-error">Tekstområde med fejlmeddelelse</label>

    <span class="form-error-message" id="textarea-error-error">
        <span class="sr-only">Fejl: </span>Hjælpsom fejlmeddelelse
    </span>
    <textarea class="form-input" id="textarea-error" name="textarea-error" rows="5" required aria-describedby="textarea-error-error "></textarea>

</div>

Sørg for at rette værdierne i følgende attributter, så de svarer til din løsning:

  • for
  • id
  • name
  • aria-describedby

Tjekboks

Eksempel på tjekbokse med fejlmeddelelse
<div class="form-group form-error">
    <fieldset aria-describedby="example-nationalitet-error">
        <legend class="form-label">
            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>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option1" name="nationalitet[]"
                class="form-checkbox checkbox-large" value="dansk">
            <label class="form-label" for="example-nationalitet-option1">Dansk</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option2" name="nationalitet[]"
                class="form-checkbox checkbox-large" value="svensk">
            <label class="form-label" for="example-nationalitet-option2">Svensk</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option3" name="nationalitet[]"
                class="form-checkbox checkbox-large" value="anden">
            <label class="form-label" for="example-nationalitet-option3">Anden
                nationalitet</label>

        </div>

    </fieldset>
</div>

Vedhæft fil

Eksempel på felt til vedhæftning af fil med fejlmeddelelse
<div class="form-group file-input form-error">
    <label class="form-label" for="form-fileinput-error">Vedhæft fil</label>
    <span class="form-error-message mb-3" id="fileinput-error"><span
            class="sr-only">Fejl:</span> Filens størrelse skal være under 2MB</span>
    <input type="file" id="form-fileinput-error" name="file"
        aria-describedby="fileinput-error">
</div>