Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

Validácia

Poskytnite svojim používateľom hodnotnú spätnú väzbu, ktorú možno vykonať pomocou overenia formulára HTML5, prostredníctvom predvoleného správania prehliadača alebo vlastných štýlov a JavaScriptu.

Na tejto stránke
Sme si vedomí toho, že v súčasnosti nie sú prístupné vlastné štýly overovania a popisy na strane klienta, pretože nie sú vystavené asistenčným technológiám. Kým pracujeme na riešení, odporúčame použiť buď možnosť na strane servera, alebo predvolený spôsob overenia prehliadača.

Ako to funguje

Tu je návod, ako funguje overenie formulárov s Bootstrap:

  • Overenie formulára HTML sa používa prostredníctvom dvoch pseudotried CSS :invalida :valid. Vzťahuje sa na prvky <input>, <select>, a <textarea>.
  • Bootstrap rozsahy štýlov :invalida :validna nadradenú .was-validatedtriedu, zvyčajne aplikované na <form>. V opačnom prípade sa akékoľvek povinné pole bez hodnoty pri načítaní stránky zobrazí ako neplatné. Týmto spôsobom si môžete vybrať, kedy ich chcete aktivovať (zvyčajne po pokuse o odoslanie formulára).
  • Ak chcete obnoviť vzhľad formulára (napríklad v prípade dynamického odosielania formulárov pomocou AJAX), po odoslaní znova odstráňte .was-validatedtriedu z formulára.<form>
  • Namiesto pseudotried na overenie na strane servera sa môžu použiť triedy .is-invalida . Nevyžadujú rodičovskú triedu..is-valid.was-validated
  • Kvôli obmedzeniam v spôsobe fungovania CSS nemôžeme (v súčasnosti) použiť štýly na <label>prvok, ktorý sa nachádza pred ovládacím prvkom formulára v DOM bez pomoci vlastného JavaScriptu.
  • Všetky moderné prehliadače podporujú rozhranie API na overenie obmedzení , sériu metód JavaScriptu na overenie ovládacích prvkov formulárov.
  • Správy spätnej väzby môžu využívať predvolené nastavenia prehliadača (rôzne pre každý prehliadač a nestylovateľné cez CSS) alebo naše vlastné štýly spätnej väzby s dodatočným HTML a CSS.
  • Môžete poskytnúť vlastné správy o platnosti setCustomValidityv jazyku JavaScript.

Vzhľadom na to zvážte nasledujúce ukážky našich vlastných štýlov overovania formulárov, voliteľných tried na strane servera a predvolených nastavení prehliadača.

Vlastné štýly

Pre vlastné správy na overenie formulára Bootstrap budete musieť pridať novalidatebooleovský atribút do súboru <form>. Toto zakáže predvolené popisy spätnej väzby prehliadača, ale stále poskytuje prístup k rozhraniam API na overenie formulárov v jazyku JavaScript. Skúste odoslať formulár nižšie; náš JavaScript zachytí tlačidlo Odoslať a odošle vám spätnú väzbu. Pri pokuse o odoslanie uvidíte štýly :invalida použité na ovládacie prvky formulára.:valid

Vlastné štýly spätnej väzby používajú vlastné farby, orámovanie, štýly zamerania a ikony pozadia na lepšiu komunikáciu spätnej väzby. Ikony pozadia pre <select>s sú dostupné len s .form-select, a nie s .form-control.

Vyzerá dobre!
Vyzerá dobre!
@
Vyberte si používateľské meno.
Zadajte platné mesto.
Vyberte platný štát.
Zadajte platný zips.
Pred odoslaním musíte súhlasiť.
html 
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()

Predvolené nastavenia prehliadača

Nemáte záujem o vlastné správy so spätnou väzbou na overenie alebo písanie JavaScriptu na zmenu správania formulárov? Všetko v poriadku, môžete použiť predvolené nastavenia prehliadača. Skúste odoslať formulár nižšie. V závislosti od vášho prehliadača a operačného systému uvidíte trochu iný štýl spätnej väzby.

Aj keď tieto štýly spätnej väzby nemožno upravovať pomocou CSS, text spätnej väzby môžete prispôsobiť pomocou JavaScriptu.

@
html 
<form class="row g-3">
  <div class="col-md-4">
    <label for="validationDefault01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefault02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefaultUsername" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend2">@</span>
      <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationDefault03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationDefault03" required>
  </div>
  <div class="col-md-3">
    <label for="validationDefault04" class="form-label">State</label>
    <select class="form-select" id="validationDefault04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-3">
    <label for="validationDefault05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationDefault05" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

Strana servera

Odporúčame použiť overenie na strane klienta, ale v prípade, že požadujete overenie na strane servera, môžete označiť neplatné a platné polia formulára pomocou .is-invalida .is-valid. Všimnite si, že .invalid-feedbackje to podporované aj týmito triedami.

V prípade neplatných polí sa uistite, že neplatná spätná väzba/chybová správa je priradená k príslušnému poľu formulára pomocou aria-describedby(všimnite si, že tento atribút umožňuje idodkazovať na viac ako jedno v prípade, že pole už ukazuje na ďalší text formulára).

Na odstránenie problémov s polomerom ohraničenia vyžadujú skupiny vstupov ďalšiu .has-validationtriedu.

Vyzerá dobre!
Vyzerá dobre!
@
Vyberte si používateľské meno.
Zadajte platné mesto.
Vyberte platný štát.
Zadajte platný zips.
Pred odoslaním musíte súhlasiť.
html 
<form class="row g-3">
  <div class="col-md-4">
    <label for="validationServer01" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServer02" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServerUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend3">@</span>
      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
      <div id="validationServerUsernameFeedback" class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationServer03" class="form-label">City</label>
    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
    <div id="validationServer03Feedback" class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer04" class="form-label">State</label>
    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div id="validationServer04Feedback" class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer05" class="form-label">Zip</label>
    <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
    <div id="validationServer05Feedback" class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

Podporované prvky

Štýly overenia sú dostupné pre nasledujúce ovládacie prvky formulárov a komponenty:

  • <input>s a <textarea>s .form-control(vrátane až jedného .form-controlvo vstupných skupinách)
  • <select>s.form-select
  • .form-checks
Do textovej oblasti zadajte správu.
Príklad neplatného textu spätnej väzby
Ďalší príklad neplatného textu spätnej väzby
Príklad neplatnej spätnej väzby výberu
Príklad neplatnej spätnej väzby k súboru formulára
html 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
    <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
  </div>
  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="form-select" required aria-label="select example">
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid select feedback</div>
  </div>

  <div class="mb-3">
    <input type="file" class="form-control" aria-label="file example" required>
    <div class="invalid-feedback">Example invalid form file feedback</div>
  </div>

  <div class="mb-3">
    <button class="btn btn-primary" type="submit" disabled>Submit form</button>
  </div>
</form>

Popisy

Ak to rozloženie formulára umožňuje, môžete triedy zameniť .{valid|invalid}-feedbackza .{valid|invalid}-tooltiptriedy, aby sa zobrazila spätná väzba na overenie v štýlovom popise. Uistite sa, že máte na position: relativeňom rodiča na umiestnenie popisku. V nižšie uvedenom príklade to už naše triedy stĺpcov majú, ale váš projekt môže vyžadovať alternatívne nastavenie.

Vyzerá dobre!
Vyzerá dobre!
@
Vyberte si jedinečné a platné používateľské meno.
Zadajte platné mesto.
Vyberte platný štát.
Zadajte platný zips.
html 
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
    <div class="valid-tooltip">
      Looks good!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
    <div class="valid-tooltip">
      Looks good!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltipUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
      <div class="invalid-tooltip">
        Please choose a unique and valid username.
      </div>
    </div>
  </div>
  <div class="col-md-6 position-relative">
    <label for="validationTooltip03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationTooltip03" required>
    <div class="invalid-tooltip">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip04" class="form-label">State</label>
    <select class="form-select" id="validationTooltip04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-tooltip">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationTooltip05" required>
    <div class="invalid-tooltip">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

Sass

Premenné

$form-feedback-margin-top:          $form-text-margin-top;
$form-feedback-font-size:           $form-text-font-size;
$form-feedback-font-style:          $form-text-font-style;
$form-feedback-valid-color:         $success;
$form-feedback-invalid-color:       $danger;

$form-feedback-icon-valid-color:    $form-feedback-valid-color;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

Mixins

Dva mixiny sa kombinujú prostredníctvom našej slučky , aby vytvorili naše štýly spätnej väzby na overenie formulárov.

@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    .was-validated #{if(&, "&", "")}:#{$state},
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

@mixin form-validation-state(
  $state,
  $color,
  $icon,
  $tooltip-color: color-contrast($color),
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
  .#{$state}-feedback {
    display: none;
    width: 100%;
    margin-top: $form-feedback-margin-top;
    @include font-size($form-feedback-font-size);
    font-style: $form-feedback-font-style;
    color: $color;
  }

  .#{$state}-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%; // Contain to parent when possible
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
    margin-top: .1rem;
    @include font-size($form-feedback-tooltip-font-size);
    line-height: $form-feedback-tooltip-line-height;
    color: $tooltip-color;
    background-color: $tooltip-bg-color;
    @include border-radius($form-feedback-tooltip-border-radius);
  }

  @include form-validation-state-selector($state) {
    ~ .#{$state}-feedback,
    ~ .#{$state}-tooltip {
      display: block;
    }
  }

  .form-control {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-image: escape-svg($icon);
        background-repeat: no-repeat;
        background-position: right $input-height-inner-quarter center;
        background-size: $input-height-inner-half $input-height-inner-half;
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }
    }
  }

  // stylelint-disable-next-line selector-no-qualifying-type
  textarea.form-control {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
      }
    }
  }

  .form-select {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        &:not([multiple]):not([size]),
        &:not([multiple])[size="1"] {
          padding-right: $form-select-feedback-icon-padding-end;
          background-image: escape-svg($form-select-indicator), escape-svg($icon);
          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
        }
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }
    }
  }

  .form-control-color {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        width: add($form-color-width, $input-height-inner);
      }
    }
  }

  .form-check-input {
    @include form-validation-state-selector($state) {
      border-color: $color;

      &:checked {
        background-color: $color;
      }

      &:focus {
        box-shadow: $focus-box-shadow;
      }

      ~ .form-check-label {
        color: $color;
      }
    }
  }
  .form-check-inline .form-check-input {
    ~ .#{$state}-feedback {
      margin-left: .5em;
    }
  }

  .input-group {
    > .form-control:not(:focus),
    > .form-select:not(:focus),
    > .form-floating:not(:focus-within) {
      @include form-validation-state-selector($state) {
        @if $state == "valid" {
          z-index: 3;
        } @else if $state == "invalid" {
          z-index: 4;
        }
      }
    }
  }
}

Mapa

Toto je overovacia mapa Sass z _variables.scss. Toto prepíšte alebo rozšírte, aby ste vygenerovali iné alebo ďalšie stavy.

$form-validation-states: (
  "valid": (
    "color": $form-feedback-valid-color,
    "icon": $form-feedback-icon-valid
  ),
  "invalid": (
    "color": $form-feedback-invalid-color,
    "icon": $form-feedback-icon-invalid
  )
);

Mapy $form-validation-statesmôžu obsahovať tri voliteľné parametre na prepísanie popisov nástrojov a štýlov zaostrenia.

Slučka

Používa sa na iteráciu $form-validation-stateshodnôt mapy na generovanie našich overovacích štýlov. Akékoľvek úpravy vyššie uvedenej mapy Sass sa prostredníctvom tejto slučky prejavia vo vašom zostavenom CSS.

@each $state, $data in $form-validation-states {
  @include form-validation-state($state, $data...);
}

Prispôsobovanie

Stavy overenia je možné prispôsobiť cez Sass s $form-validation-statesmapou. Táto mapa Sass, ktorá sa nachádza v našom _variables.scsssúbore, je spôsob, akým generujeme predvolené valid/ invalidoverovacie stavy. Zahrnutá je vnorená mapa na prispôsobenie farby, ikony, farby popisku a tieňa každého štátu. Hoci prehliadače nepodporujú žiadne iné stavy, prehliadače používajúce vlastné štýly môžu jednoducho pridať komplexnejšiu spätnú väzbu k formulárom.