VER. 1.2 Obsahuje validátor webového sídla alebo formulára s IDSK štandardom.

Webové komponentyChyby 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é:

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

Skontrolujte si svoje osobné údaje

Pozrite sa na svoje meno, podpis a ďalšie podrobnosti.

Sú vaše osobné údaje správne a aktuálne?Priestor na chybovú hlášku 
<div class="grid-row">
  <div class="column-two-thirds">
    <div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
      <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
        Miesto pre správu, ktorá upozorňuje, že nastal problém
      </h2>
      <p>
        Priestor pre popis, k akým chybám došlo a ako ich opraviť.
      </p>
      <ul class="error-summary-list">
        <li><a href="#example-personal-details">Popis s odkazom na otázku, v ktorej nastala chyba</a></li>
      </ul>
    </div>
    <h1 class="heading-large">
      Skontrolujte si svoje osobné údaje
    </h1>
    <p>
      Pozrite sa na svoje meno, podpis a ďalšie podrobnosti.
    </p>
    <form>
      <div class="form-group form-group-error">
        <fieldset>
          <legend id="example-personal-details">
            <span class="form-label-bold">
              Sú vaše osobné údaje správne a aktuálne?
            </span>
            <span class="error-message">
              Priestor na chybovú hlášku
            </span>
          </legend>
          <div class="multiple-choice">
            <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
            <label for="personal_details_yes">Áno, moje osobné údaje sú správne</label>
          </div>
          <div class="multiple-choice">
            <input id="personal_details_no" type="radio" name="personalDetails" value="No">
            <label for="personal_details_no">Nie, niektoré údaje sú nesprávne alebo sa zmenili</label>
          </div>
        </fieldset>
      </div>
      <input class="button" type="submit" value="Pokračovať">
    </form>
  </div>
</div>

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:

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

Vaše osobné údaje

<div class="grid-row">
  <div class="column-two-thirds">
    <div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-2" tabindex="-1">
      <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">
        Miesto pre správu, ktorá upozorňuje, že nastal problém
      </h2>
      <p>
        Priestor pre popis, k akým chybám došlo a ako ich opraviť
      </p>
      <ul class="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>
    <h1 class="heading-large">
      Vaše osobné údaje
    </h1>
    <div class="form-group form-group-error">
      <label for="example-full-name" id="error-full-name">
        <span class="form-label-bold">Meno a priezvisko</span>
        <span class="form-hint">Tak ako ho máte uvedené v rodnom liste alebo pase</span>
        <span class="error-message">Priestor pre chybové hlásenie</span>
      </label>
      <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="">
    </div>
    <div class="form-group form-group-error">
      <label for="example-ni-number" id="error-ni-number">
        <span class="form-label-bold">Číslo preukazu poistenca</span>
        <span class="form-hint">
          Nájdete ho na prednej strane vášho preukazu poistenca.
          <br>
          napríklad, ‘QQ 12 34 56 C’.
        </span>
        <span class="error-message">
          Priestor pre chybové hlásenie
        </span>
      </label>
      <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="">
    </div>
    <input class="button" type="submit" value="Pokračovať">
  </div>
</div>

Príklady