Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

Тикшерү

HTML5 формасын тикшерү белән, кулланучыларга кыйммәтле, эшлекле җавап бирегез, браузерның гадәти тәртибе яки махсус стильләре һәм JavaScript аша.

Бу биттә
Без беләбез, хәзерге вакытта клиент ягыннан махсус тикшерү стиле һәм корал киңәшләре мөмкин түгел, чөнки алар ярдәмче технологияләргә тәэсир итмиләр. Чишелеш өстендә эшләгәндә, без сервер ягыннан яисә браузерның килешү ысулын кулланырга киңәш итәрбез.

Ничек бу эшли

Ботстрап белән форманы тикшерү ничек эшли:

  • HTML формасын тикшерү CSSның ике псевдо-классы аша кулланыла, :invalidһәм :valid. Бу элементларга <input>кагыла .<select><textarea>
  • Ботстрап ата-аналар классына :invalidһәм :validстильләрен киңәйтә, гадәттә . Otherwiseгыйсә, кыйммәтсез теләсә нинди кыр битнең йөкләнешендә яраксыз булып күрсәтелә. Шул рәвешле, сез аларны кайчан активлаштырырга икәнен сайлый аласыз (гадәттә форма тапшырылганнан соң)..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>. Бу браузерның кире элемтә коралларын сүндерә, ләкин JavaScript'та форманы тикшерү API'ларына рөхсәт бирә. Түбәндәге форманы җибәрергә тырышыгыз; безнең JavaScript тапшыру төймәсен тотып торачак һәм сезгә кире элемтә. Тапшырырга тырышканда, сез форма контроллерында кулланылган стильләрне :invalidһәм стильләрне күрерсез.:valid

Фикер алышуны яхшырак аралашу өчен, махсус стильләр махсус төсләр, чикләр, фокус стильләре һәм фон иконаларын кулланалар. S өчен фон иконалары <select>бары тик мөмкин .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>

Сасс

Variзгәрешләр

$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корал киңәшләрен һәм фокус стильләрен юкка чыгару өчен өч өстәмә параметр булырга мөмкин.

Loop

$form-validation-statesБезнең тикшерү стильләрен булдыру өчен карта кыйммәтләре өстендә кабатлау өчен кулланыла . Aboveгарыдагы Sass картасына теләсә нинди үзгәртүләр бу цикл аша тупланган CSSда чагылачак.

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

Custзенчәләштерү

Тикшерү халәтләрен Sass аша $form-validation-statesкарта белән көйләргә мөмкин. Безнең _variables.scssфайлда урнашкан, бу Sass картасы - без килешү valid/ invalidтикшерү халәтләрен ничек ясыйбыз. Eachәрбер дәүләтнең төсен, иконасын, корал төсләрен, фокус күләгәсен көйләү өчен ояланган карта кертелгән. Башка штатлар браузерлар белән булышмаса да, махсус стильләр кулланучылар җиңелрәк форма редакциясен өсти алалар.