Error summary - Prehľad s chybovými hláseniami

Prehľad s chybovými hláseniami

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      Zadajte správne tieto vstupné údaje a skúste odoslať znova.
    </h2>
      <p class="govuk-error-summary__description">
        Priestor pre popis, k akým chybám došlo a ako ich opraviť.
      </p>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          <a href="#example-error-1">Prosím, zadajte správny tvar vášho Rodného čísla.</a>
        </li>
        <li>
          <a href="#example-error-2">Prosím, zadajte správny tvar vášho OP preukazu.</a>
        </li>
        <li>
          <a href="#example-error-3">Prosím, zadajte správny tvar vášho Tel.čísla.</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{{ govukErrorSummary({
  titleText: "Zadajte správne tieto vstupné údaje a skúste odoslať znova.",
  descriptionText: "Priestor pre popis, k akým chybám došlo a ako ich opraviť.",
  errorList: [
    {
      text: "Prosím, zadajte správny tvar vášho Rodného čísla.",
      href: "#example-error-1"
    },
    {
      text: "Prosím, zadajte správny tvar vášho OP preukazu.",
      href: "#example-error-2"
    },
    {
      text: "Prosím, zadajte správny tvar vášho Tel.čísla.",
      href: "#example-error-3"
    }
  ]
}) }}

Prehľad s chybovými hláseniami without links

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem
    </h2>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          Invalid username or password
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Invalid username or password"
    }
  ]
}) }}

Prehľad s chybovými hláseniami mixed with and without links

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem
    </h2>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          Invalid username or password
        </li>
        <li>
          <a href="#example-error-1">Agree to the terms of service to log in</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Invalid username or password"
    },
    {
      text: "Agree to the terms of service to log in",
      href: "#example-error-1"
    }
  ]
}) }}

Prehľad s chybovými hláseniami with everything

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">
      There is a problem
    </h2>
      <p class="govuk-error-summary__description">
        Please fix the errors below.
      </p>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          Invalid username or password
        </li>
        <li>
          <a href="#example-error-1">Agree to the terms of service to log in</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{{ govukErrorSummary({
  titleText: "There is a problem",
  descriptionText: "Please fix the errors below.",
  errorList: [
    {
      text: "Invalid username or password"
    },
    {
      text: "Agree to the terms of service to log in",
      href: "#example-error-1"
    }
  ]
}) }}