Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

Валидация

Браузердің әдепкі әрекеттері немесе реттелетін мәнерлер және JavaScript арқылы HTML5 пішінін тексеру арқылы пайдаланушыларға құнды, әрекет етуге болатын кері байланысты қамтамасыз етіңіз.

Бұл бетте
Қазіргі уақытта клиенттік теңшелетін тексеру мәнерлері мен құралдар кеңестері қолжетімді емес екенін білеміз, өйткені олар көмекші технологияларға ұшырамайды. Шешіммен жұмыс істеп жатқанда, сервер жағындағы опцияны немесе әдепкі шолғышты тексеру әдісін пайдалануды ұсынамыз.

Бұл қалай жұмыс істейді

Пішінді тексеру 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>таңдамалы JavaScript көмегінсіз DOM ішіндегі пішін басқару элементінен бұрын келетін мәнерлерді қолдана алмаймыз.
  • Барлық заманауи шолғыштар пішім басқару элементтерін тексеруге арналған JavaScript әдістерінің қатарын, шектеуді тексеру API қолдайды.
  • Кері байланыс хабарлары браузердің әдепкі параметрлерін (әр браузер үшін әр түрлі және CSS арқылы реттелмейтін) немесе қосымша HTML және CSS көмегімен реттелетін кері байланыс мәнерлерін пайдалануы мүмкін.
  • setCustomValidityСіз JavaScript арқылы теңшелетін жарамдылық хабарларын бере аласыз .

Осыны ескере отырып, біздің теңшелетін пішінді тексеру мәнерлеріміз, қосымша серверлік сыныптар және браузердің әдепкі параметрлері үшін келесі демонстрацияларды қарастырыңыз.

Арнайы стильдер

Теңшелетін Bootstrap пішінін тексеру хабарлары үшін novalidateлогикалық төлсипатты өзіңіздің <form>. Бұл шолғыштың әдепкі кері байланыс кеңестерін өшіреді, бірақ JavaScript ішіндегі пішінді тексеру API интерфейстеріне қатынасты қамтамасыз етеді. Төмендегі пішінді жіберіп көріңіз; біздің JavaScript жіберу түймесін басып, сізге кері байланыс жібереді. Жіберуге әрекет жасағанда , пішін басқару элементтеріне қолданылатын :invalidжәне мәнерлерді көресіз .:valid

Реттелетін кері байланыс мәнерлері кері байланысты жақсырақ жеткізу үшін реттелетін түстерді, жиектерді, фокус мәнерлерін және фондық белгішелерді қолданады. s үшін фондық белгішелер <select>тек арқылы қол жетімді .form-select, бірақ жоқ .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<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
(function () {
  'use strict'

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

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

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

Браузердің әдепкі параметрлері

Пішін әрекеттерін өзгерту үшін теңшелетін тексеру туралы кері байланыс хабарлары немесе JavaScript жазу қызықты емес пе? Бәрі жақсы, сіз браузердің әдепкі параметрлерін пайдалана аласыз. Төмендегі пішінді жіберіп көріңіз. Браузеріңізге және ОЖ-ға байланысты сіз сәл басқа пікір стилін көресіз.

Бұл кері байланыс мәнерлерін CSS көмегімен стильдеу мүмкін болмаса да, сіз әлі де JavaScript арқылы кері байланыс мәтінін теңшей аласыз.

@ 
<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сыныпты қажет етеді.

Жақсы көрінеді!
Жақсы көрінеді!
@
Пайдаланушы атын таңдаңыз.
Жарамды қаланы көрсетіңіз.
Жарамды күйді таңдаңыз.
Жарамды zip файлын беріңіз.
Жібермес бұрын келісу керек. 
<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с
Мәтіндік аймаққа хабарлама енгізіңіз.
Мысал жарамсыз кері байланыс мәтіні
Қосымша мысал жарамсыз кері байланыс мәтіні
Мысал жарамсыз таңдау пікірі
Мысал жарамсыз пішін файлы кері байланысы 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Textarea</label>
    <textarea class="form-control is-invalid" 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. Төмендегі мысалда біздің баған сыныптарымызда бұл бар, бірақ сіздің жобаңыз балама орнатуды қажет етуі мүмкін.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<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.73L.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-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,
  .input-group .form-select {
    @include form-validation-state-selector($state) {
      @if $state == "valid" {
        z-index: 1;
      } @else if $state == "invalid" {
        z-index: 2;
      }
      &:focus {
        z-index: 3;
      }
    }
  }
}

Карта

Бұл 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...);
}

Баптау

$form-validation-statesТексеру күйлерін Sass арқылы картамен теңшеуге болады . Біздің файлда орналасқан бұл Sass картасы әдепкі / тексеру күйлерін _variables.scssжасау әдісі болып табылады . Әрбір күйдің түсін, белгішесін, құралдар кеңесінің түсін және фокус көлеңкесін теңшеуге арналған кірістірілген карта қосылған. Басқа ешбір күйге браузерлер қолдау көрсетпесе де, реттелетін мәнерлерді пайдаланатындар күрделірек пішін кері байланысын оңай қоса алады.validinvalid

Біз миксинді $form-validation-statesөзгертпей мәндердіform-validation-state теңшеуді ұсынбайтынымызды ескеріңіз .