Преминете към основното съдържание Преминете към навигацията с документи
Check
in English

Валидиране

Осигурете ценна, полезна обратна връзка на вашите потребители с валидиране на HTML5 формуляр, чрез поведението по подразбиране на браузъра или персонализирани стилове и JavaScript.

На тази страница
Наясно сме, че понастоящем персонализираните стилове за валидиране и подсказки от страна на клиента не са достъпни, тъй като не са изложени на помощни технологии. Докато работим върху решение, бихме препоръчали или да използвате опцията от страната на сървъра, или метода за проверка на браузъра по подразбиране.

Как работи

Ето как работи проверката на формуляр с Bootstrap:

  • Валидирането на HTML форма се прилага чрез двата псевдо-класа на CSS :invalidи :valid. Прилага се за <input>, <select>и <textarea>елементи.
  • Bootstrap обхваща :invalidи :validстилове към родителския .was-validatedклас, обикновено се прилага към <form>. В противен случай всяко задължително поле без стойност се показва като невалидно при зареждане на страницата. По този начин можете да изберете кога да ги активирате (обикновено след опит за изпращане на формуляр).
  • За да нулирате външния вид на формуляра (например в случай на динамично изпращане на формуляр с помощта на AJAX), премахнете .was-validatedкласа от <form>отново след изпращане.
  • Като резервен вариант могат да .is-invalidсе .is-validизползват класове вместо псевдокласове за валидиране от страна на сървъра . Те не изискват .was-validatedродителски клас.
  • Поради ограничения в начина, по който работи CSS, не можем (понастоящем) да прилагаме стилове към a <label>, който идва преди контрола на формуляр в DOM, без помощта на персонализиран JavaScript.
  • Всички съвременни браузъри поддържат API за валидиране на ограничения , поредица от JavaScript методи за валидиране на контроли на формуляри.
  • Съобщенията за обратна връзка могат да използват настройките по подразбиране на браузъра (различни за всеки браузър и неподлежащи на стилизиране чрез CSS) или нашите персонализирани стилове за обратна връзка с допълнителни HTML и CSS.
  • Можете да предоставите персонализирани съобщения за валидност setCustomValidityв JavaScript.

Имайки това предвид, разгледайте следните демонстрации за нашите персонализирани стилове за валидиране на формуляри, незадължителни класове от страна на сървъра и настройки по подразбиране на браузъра.

Персонализирани стилове

За персонализирани съобщения за валидиране на формуляр Bootstrap ще трябва да добавите novalidateбулевия атрибут към вашия <form>. Това деактивира подсказките за обратна връзка по подразбиране на браузъра, но все още осигурява достъп до API за валидиране на формуляр в JavaScript. Опитайте да изпратите формуляра по-долу; нашият JavaScript ще прихване бутона за изпращане и ще ви предаде обратна връзка. Когато се опитвате да изпратите, ще видите стиловете :invalidи :valid, приложени към вашите контроли на формуляра.

Персонализираните стилове за обратна връзка прилагат персонализирани цветове, граници, стилове на фокусиране и фонови икони за по-добро предаване на обратна връзка. Иконите за фон за <select>s са налични само с .form-select, но не и с .form-control.

Изглежда добре!
Изглежда добре!
@
Моля, изберете потребителско име.
Моля, посочете валиден град.
Моля, изберете валиден щат.
Моля, предоставете валиден пощенски код.
Трябва да се съгласите, преди да изпратите.
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)
  })
})()

Браузър по подразбиране

Не се интересувате от персонализирани съобщения за обратна връзка за валидиране или писане на JavaScript за промяна на поведението на формуляра? Всичко е наред, можете да използвате настройките на браузъра по подразбиране. Опитайте да изпратите формуляра по-долу. В зависимост от вашия браузър и операционна система ще видите малко по-различен стил на обратна връзка.

Въпреки че тези стилове за обратна връзка не могат да бъдат стилизирани с CSS, все пак можете да персонализирате текста за обратна връзка чрез JavaScript.

@
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>

Страната на сървъра

Препоръчваме да използвате валидиране от страна на клиента, но в случай че се нуждаете от валидиране от страна на сървъра, можете да посочите невалидни и валидни полета на формуляра с .is-invalidи .is-valid. Имайте предвид, че .invalid-feedbackсе поддържа и с тези класове.

За невалидни полета се уверете, че невалидното съобщение за обратна връзка/грешка е свързано със съответното поле на формуляр, използвайки aria-describedby(като има предвид, че този атрибут позволява idда се препраща към повече от едно, в случай че полето вече сочи към допълнителен текст на формуляр).

За да коригирате проблеми с радиуса на границата , групите за въвеждане изискват допълнителен .has-validationклас.

Изглежда добре!
Изглежда добре!
@
Моля, изберете потребителско име.
Моля, посочете валиден град.
Моля, изберете валиден щат.
Моля, предоставете валиден пощенски код.
Трябва да се съгласите, преди да изпратите.
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>

Поддържани елементи

Налични са стилове за проверка за следните контроли и компоненти на формуляри:

  • <input>s и <textarea>s с .form-control(включително до един .form-controlвъв входни групи)
  • <select>s с.form-select
  • .form-checkс
Моля, въведете съобщение в текстовото поле.
Примерен невалиден текст за обратна връзка
Още примерен невалиден текст за обратна връзка
Пример за невалидна обратна връзка за избор
Примерна обратна връзка за файл с невалиден формуляр
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>

Подсказки

Ако оформлението на вашия формуляр го позволява, можете да размените .{valid|invalid}-feedbackкласовете с .{valid|invalid}-tooltipкласове, за да покажете обратна връзка за валидиране в стилизирана подсказка. Уверете се, че имате родител с position: relativeнего за позициониране на подсказка. В примера по-долу нашите класове колони вече имат това, но вашият проект може да изисква алтернативна настройка.

Изглежда добре!
Изглежда добре!
@
Моля, изберете уникално и валидно потребителско име.
Моля, посочете валиден град.
Моля, изберете валиден щат.
Моля, предоставете валиден пощенски код.
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>

дързък

Променливи

$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>");

Миксини

Два миксина се комбинират заедно чрез нашия цикъл , за да генерират нашите стилове за обратна връзка за валидиране на формуляр.

@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;
        }
      }
    }
  }
}

Карта

Това е картата на Sass за валидиране от _variables.scss. Заменете или разширете това, за да генерирате различни или допълнителни състояния.

$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
  )
);

Картите на $form-validation-statesмогат да съдържат три незадължителни параметъра за отмяна на подсказки и стилове на фокусиране.

Цикъл

Използва се за итерация на $form-validation-statesстойностите на картата за генериране на нашите стилове за валидиране. Всички модификации на горната Sass карта ще бъдат отразени във вашия компилиран CSS чрез този цикъл.

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

Персонализиране

Състоянията на валидиране могат да бъдат персонализирани чрез Sass с $form-validation-statesкартата. Разположена в нашия _variables.scssфайл, тази карта на Sass е начинът, по който генерираме състоянията по подразбиране valid/ invalidвалидиране. Включена е вложена карта за персонализиране на цвета, иконата, цвета на подсказката и фокусната сянка на всяко състояние. Докато никакви други състояния не се поддържат от браузърите, тези, които използват персонализирани стилове, могат лесно да добавят по-сложна обратна връзка за формуляри.