Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
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, мы не можам (у цяперашні час) прымяніць стылі да, <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>з с.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картай. Гэтая карта Sass, размешчаная ў нашым _variables.scssфайле, з'яўляецца спосабам генерацыі станаў па змаўчанні valid/ invalidправеркі. Уключана ўкладзеная карта для налады колеру кожнага стану, значка, колеру падказкі і цені фокуса. Хаця ніякія іншыя станы не падтрымліваюцца браўзерамі, тыя, хто выкарыстоўвае карыстальніцкія стылі, могуць лёгка дадаць больш складаную форму зваротнай сувязі.