Validation

Bi verastkirina forma HTML5-ê, bi tevgerên xwerû yên gerokê an şêwazên xwerû û JavaScript-ê re bertekên hêja û çalak ji bikarhênerên xwe re peyda bikin.

Li ser vê rûpelê

Em dizanin ku naha şêwazên pejirandina xwerû yên ji hêla xerîdar û serişteyên amûran ve nayên gihîştin, ji ber ku ew li ber teknolojiyên arîkar nabin. Dema ku em li ser çareseriyekê dixebitin, em ê pêşniyar bikin ku vebijarka server-side an jî rêbaza pejirandina geroka xwerû bikar bînin.

Çawa dixebite

Li vir çawa pejirandina formê bi Bootstrap re dixebite:

Verastkirina forma HTML-ê bi navgîniya du pseudo-dersên CSS-ê ve tê sepandin, :invalidû :valid. Ew ji bo <input>, <select>, û <textarea>hêmanan derbas dibe.
Bootstrap li çîna dêûbav :invalidû şêwazên ku bi gelemperî li ser tê sepandin vedihewîne . Wekî din, her qada pêdivî ya bê nirx di barkirina rûpelê de nederbasdar xuya dike. Bi vî rengî, hûn dikarin hilbijêrin kengê wan çalak bikin (bi gelemperî piştî ku şandina formê tê ceribandin).:valid.was-validated<form>
Ji bo sifirkirina xuyangê formê (mînak, di rewşa radestkirina forma dînamîkî de ku AJAX bikar tînin), piştî radestkirinê dîsa .was-validatedpolê ji polê derxînin.<form>
Wekî paşveçûn, .is-invalidû .is-validçîn dikarin li şûna pseudo-classan ji bo erêkirina server-side werin bikar anîn . Ew hewceyê .was-validatedpola dêûbav ne.
Ji ber astengiyên di çawaniya karkirina CSS de, em nikarin (niha) şêwazên ku <label>di DOM-ê de berî kontrolek formek tê bêyî arîkariya JavaScript-a xwerû bicîh bikin.
Hemî gerokên nûjen piştgirî didin API-ya pejirandina astengiyê , rêzek rêbazên JavaScript-ê ji bo rastkirina kontrolên formê.
Dibe ku peyamên nerînên pêşnumayên gerokê (ji bo her gerokek cihêreng, û bi CSS-ê veneguhêzbar) an şêwazên meya nerînên xwerû yên bi HTML û CSS-a zêde bikar bînin.
setCustomValidityHûn dikarin di JavaScriptê de peyamên derbasdariya xwerû peyda bikin .

Di hişê xwe de, demoyên jêrîn ji bo şêwazên pejirandina forma xwerû, dersên bijartî yên server-ê, û pêşnumayên gerokê binihêrin.

styles Custom

Ji bo peyamên pejirandina forma Bootstrap a xwerû, hûn ê hewce bikin ku novalidatetaybetmendiya boolean li xwe zêde bikin <form>. Ev serişteyên amûra bergera xwerû ya gerokê neçalak dike, lê dîsa jî gihîştina API-yên pejirandina formê di JavaScript de peyda dike. Biceribînin ku forma jêrîn bişînin; JavaScript-a me dê bişkoja şandinê bigire û bertekên xwe ji we re veguhezîne. Dema ku hûn hewl bidin ku radest bikin, hûn ê şêwaz :invalidû :validşêwazên ku li ser kontrolên forma we hatine bicîh kirin bibînin.

Şêweyên nerînên xwerû rengên xwerû, sînor, şêwazên baldarî û îkonên paşerojê bicîh dikin da ku nerînên çêtir ragihînin. Îkonên paşperdeya ji bo <select>s tenê bi .form-select, û ne .form-control.

<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)
    })
})()

Pêşniyarên gerokê

Ne eleqedar nabin ji peyamên nerînên pejirandî yên xwerû an jî nivîsandina JavaScript-ê ku tevgerên formê biguhezînin? Hemî baş, hûn dikarin pêşnumayên gerokê bikar bînin. Biceribînin ku forma jêrîn bişînin. Bi gerok û OS-ya xwe ve girêdayî, hûn ê şêwazek nerînek hinekî cûda bibînin.

Dema ku ev şêwazên bersivdayînê nekarin bi CSS-ê re şêwaz bikin, hûn dîsa jî dikarin bi JavaScript-ê nivîsa bersivê xweş bikin.

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

Server aliyê

Em pêşniyar dikin ku erêkirina ji hêla xerîdar ve were bikar anîn, lê heke hûn hewceyê pejirandina ji hêla serverê bikin, hûn dikarin qadên forma nederbasdar û derbasdar bi .is-invalidû destnîşan .is-validbikin. Têbînî ku .invalid-feedbackbi van dersan jî tê piştgirî kirin.

Ji bo qadên nederbasdar, pê ewle bin ku berteka nederbasdar/peyama çewtiyê bi qada formê ya têkildar re bi kar ve girêdayî be aria-describedby(bala xwe bidinê ku ev taybetmendî dihêle ku ji yekê zêdetir idwere referans kirin, heke ew qad berê xwe bide nivîsa formê ya zêde).

Ji bo çareserkirina pirsgirêkên bi tîrêjên sînor re , komên têketinê .has-validationçînek zêde hewce dike.

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

hêmanên piştgirî

Şêweyên erêkirinê ji bo kontrol û pêkhateyên jêrîn ên formê hene:

<input>s û <textarea>s bi (di nav komên têketinê de .form-controlheya yekî ).form-control
<select>s bi.form-select
.form-checks

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

Tooltips

Ger sêwirana forma we destûrê dide, hûn dikarin .{valid|invalid}-feedbackdersan bi .{valid|invalid}-tooltipdersan biguhezînin da ku bertekên erêkirinê di navgînek şêwazê de nîşan bidin. position: relativeJi bo pozîsyona tooltip bawer bin ku dêûbavek li ser wê hebe. Di mînaka li jêr de, çînên stûna me jixwe vê yekê heye, lê dibe ku projeya we sazkirinek alternatîf hewce bike.

<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

Variables

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

Mixins

Du mixîn bi hev re, bi navgîniya meya lûkê ve têne hev kirin , da ku şêwazên nerînên pejirandina forma me biafirînin.

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

Qert

Ev nexşeya erêkirina Sass-ê _variables.scssye. Vê yekê hilweşînin an dirêj bikin da ku dewletên cûda an zêde çêbikin.

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

Nexşeyan $form-validation-statesdikare sê parametreyên vebijarkî bihewîne da ku serişteyên amûran û şêwazên balê bikişîne.

Loop

Ji bo dubarekirina li ser $form-validation-statesnirxên nexşeyê tê bikar anîn da ku şêwazên pejirandina me çêbike. Guhertinên nexşeya Sass a jorîn dê di CSS-ya weya berhevkirî de bi vê lûkê were xuyang kirin.

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

Customizing

Dewletên erêkirinê dikarin bi $form-validation-statesnexşeyê ve bi riya Sass ve bêne xweş kirin. Di _variables.scsspelê me de cih digire, ev nexşeya Sass ev e ku em çawa dewletên xwerû valid/ invaliderêkirinê diafirînin. Di nav de nexşeyek hêlînek heye ji bo xweşkirina reng, îkon, rengê amûrê, û siya balê. Digel ku ti dewletên din ji hêla gerokan ve nayên piştgirî kirin, yên ku şêwazên xwerû bikar tînin dikarin bi hêsanî bertekên forma tevlihevtir zêde bikin.

Ji kerema xwe bala xwe bidin ku em bêyî guheztina mixin xwerûkirina nirxan pêşniyar nakin$form-validation-statesform-validation-state .