Негизги мазмунга өтүү Документтердин навигациясына өтүү
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>

Sass

Өзгөрмөлөр

$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кеңештерди жана фокус стилдерин жокко чыгаруу үчүн үч кошумча параметрди камтышы мүмкүн.

Loop

$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текшерүү абалын кантип түзөбүз. Ар бир штаттын түсүн, сөлөкөтүн, инструменттин түсүн жана фокус көлөкөсүн ыңгайлаштыруу үчүн уяланган карта камтылган. Башка мамлекеттер браузерлер тарабынан колдоого алынбаса да, ыңгайлаштырылган стилдерди колдонгондор оңой эле татаал форма пикирлерин кошо алышат.

Көңүл буруңуз, биз миксинди $form-validation-statesөзгөртпөстөн баалуулуктардыform-validation-state ыңгайлаштырууну сунуш кылбайбыз .