Webové komponenty

Chyby a validácia

Minimalizujte počet chýb na stránke.

Obsah:

Pýtajte sa jednu otázku na jednu stránku

Pre používateľov môže byť ťažké zorientovať sa na stránke po zobrazení chyby, najmä ak sa na nej vyskytlo viacero chýb súčasne.

Zjednodušte formuláre tak, že ich prepíšete, prípadne ak je to možné, rozdeľujte dlhé formuláre na niekoľko stránok - pričom na každej z nich sa pýtajte jednu otázku.

Pri štruktúrovaní formulára zvážte aj kontext. Ak spolu žiadané informácie súvisia, je možné ich umiestniť na stránke viac. Napríklad meno, priezvisko a číslo občianskeho preukazu.

Prehľad o chybách v hornej časti stránky

Je dôležité:

• zobraziť prehľad o chybách v hornej časti stránky,
• pridať nadpis, ktorý upozorní používateľa na chybu,
• zobraziť odkaz na každú problematickú otázku.

Okrem toho je potrebné aj v nadpise stránky v prvku <title> zobraziť, že došlo k chybe, a to umiestnením slova "Chyba: " pred existujúci nadpis (ang. title). To zabezpečí upozornenie používateľov na chybu hneď ako to bude možné.

Chybová správa so zhrnutím chýb

<form action="/" method="post">

<div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="govuk-error-summary">
  <h2 class="govuk-error-summary__title" id="error-summary-title">
    Miesto pre správu, ktorá upozorňuje, že nastal problém
  </h2>
  <div class="govuk-error-summary__body">
    <p>
      Priestor pre popis, k akým chybám došlo a ako ich opraviť.
    </p>
    <ul class="govuk-list govuk-error-summary__list">
      <li>
        <a href="#exampleRadio1">Popis s odkazom na otázku, v ktorej nastala chyba</a>
      </li>
    </ul>
  </div>
</div>


<h1 class="govuk-heading-xl">Skontrolujte si svoje osobné údaje</h1>


<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="exampleRadio1-error">
  <legend class="govuk-fieldset__legend">
    Sú vaše osobné údaje správne a aktuálne?
  </legend>
  <span id="exampleRadio1-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Priestor na chybovú hlášku
  </span>
  <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="exampleRadio1" name="exampleRadio1" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="exampleRadio1">
        Áno, moje osobné údaje sú správne
      </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="exampleRadio1-2" name="exampleRadio1" type="radio" value="no" checked>
          <label class="govuk-label govuk-radios__label" for="exampleRadio1-2">
        Nie, niektoré údaje sú nesprávne alebo sa zmenili
      </label>
        </div>
  </div>
</fieldset>
</div>


<button type="submit" class="idsk-button" data-module="idsk-button">
  Pokračovať
</button>

</form>

Prehľad o chybách sa musí nachádzať v hornej časti stránky tak, aby bol viditeľný, keď sa stránka aktualizuje a ihneď ju vedela prečítať pomocná technológia.

Zvýraznenie chýb vo formulároch

Pre každú chybu:

• napíšte správu, ktorá pomôže používateľovi pochopiť, prečo sa chyba vyskytla a ako ju má odstrániť,
• správu vložte do prvku <label> alebo <legend> k danej otázke a umiestnite ju pod textom otázky, pričom použite červenú farbu písma,
• použite červený okraj na vizuálne prepojenie chybovej správy a otázky, ku ktorej sa chyba vzťahuje,
• ak sa chyba vzťahuje na konkrétne textové polia v rámci otázky, zvýraznite ich aj červeným orámovaním.

V prípade červenej farby použite Sass premennú $error-colour, ktorú nájdete v súbore colours.scss frontend toolkitu.

<form action="/" method="post">

<div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="govuk-error-summary">
  <h2 class="govuk-error-summary__title" id="error-summary-title">
    Miesto pre správu, ktorá upozorňuje, že nastal problém
  </h2>
  <div class="govuk-error-summary__body">
    <p>
      Priestor pre popis, k akým chybám došlo a ako ich opraviť.
    </p>
    <ul class="govuk-list govuk-error-summary__list">
      <li>
        <a href="#example-full-name">Popis s odkazom na otázku, v ktorej nastala chyba</a>
      </li>
      <li>
        <a href="#example-ni-number">Popis s odkazom na otázku, v ktorej nastala chyba</a>
      </li>
    </ul>
  </div>
</div>


<h1 class="govuk-heading-xl">Skontrolujte si svoje osobné údaje</h1>


<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="example-full-name">
    Meno a priezvisko
  </label>
  <span id="example-full-name-hint" class="govuk-hint">
    Tak ako ho máte uvedené v rodnom liste alebo pase
  </span>
  <span id="example-full-name-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Priestor na chybovú hlášku
  </span>
  <input class="govuk-input govuk-input--width-30 govuk-input--error" id="example-full-name" name="fullName"  type="text" aria-describedby="example-full-name-hint example-full-name-error">
</div>


<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="example-ni-number">
    Číslo preukazu poistenca
  </label>
  <span id="example-ni-number-hint" class="govuk-hint">
    Nájdete ho na prednej strane vášho preukazu poistenca. Napríklad, ‘QQ 12 34 56 C’.
  </span>
  <span id="example-ni-number-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Priestor na chybovú hlášku
  </span>
  <input class="govuk-input govuk-input--width-30 govuk-input--error" id="example-ni-number" name="niNo"  type="text" aria-describedby="example-ni-number-hint example-ni-number-error">
</div>


<button type="submit" class="idsk-button" data-module="idsk-button">
  Pokračovať
</button>

</form>

Príklady

• Chybové správy
• Zhrnutie chýb
• Zhrnutie chýb s chybovými správami
• Zhrnutie chýb s jednou otázkou na stránku