Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Nkwado

Nye ndị ọrụ gị nzaghachi bara uru, nwere ike ịrụ ọrụ na nkwado ụdị HTML5, site na omume ndabara ihe nchọgharị ma ọ bụ ụdị omenala na Javascript.

Na ibe a
Anyị maara na ugbu a ụdị nkwado ndabere na mpaghara ndị ahịa adịghị enweta ya, ebe ọ bụ na ekpughere ha na teknụzụ enyemaka. Ka anyị na-arụ ọrụ na ngwọta, anyị ga-akwado iji nhọrọ akụkụ nkesa ma ọ bụ usoro nkwado nchọgharị ndabere.

Ka o si arụ ọrụ

Nke a bụ ka nkwado fọm si arụ ọrụ na Bootstrap:

  • A na-etinye nkwado ụdị HTML site na klaasị pseudo abụọ nke CSS, :invalidyana :valid. Ọ na-emetụta <input>, <select>, na <textarea>ọcha.
  • Bootstrap na-agbasa :invalidna :validụdị na .was-validatedklaasị nne na nna, a na-etinyekarị ya na faịlụ <form>. Ma ọ bụghị ya, ubi ọ bụla achọrọ na-enweghị uru na-egosi na ezighi ezi na ibu ibe. N'ụzọ dị otú a, ị nwere ike họrọ mgbe ịgbalite ha (na-emekarị mgbe a nwara nrubeisi ụdị).
  • Iji tọgharịa ọdịdị nke ụdị ahụ (dịka ọmụmaatụ, n'ihe gbasara ntinye ụdị ike na-eji AJAX), wepụ .was-validatedklas ahụ <form>ọzọ mgbe nrubeisi gasịrị.
  • Dị ka ndaghachi azụ, .is-invalidna .is-validklaasị nwere ike iji kama klas pseudo maka nkwado n'akụkụ nkesa . Ha achọghị .was-validatedklas nne na nna.
  • N'ihi mmachi dị na ka CSS si arụ ọrụ, anyị enweghị ike (ugbu a) itinye ụdị na nke <label>na-abịa n'ihu njikwa ụdị na DOM na-enweghị enyemaka nke JavaScript omenala.
  • Ihe nchọgharị ọgbara ọhụrụ niile na-akwado API nkwado mgbochi , usoro Javascript maka njikwa ụdị.
  • Ozi nzaghachi nwere ike iji ndabara ihe nchọgharị ahụ (dị iche maka ihe nchọgharị ọ bụla, yana nke na-adịghị mma site na CSS) ma ọ bụ ụdị nzaghachi omenala anyị nwere HTML na CSS agbakwunyere.
  • Ị nwere ike ịnye ozi nkwado ndabere na setCustomValiditympaghara Javascript.

N'iburu nke ahụ n'uche, tụlee ngosi ngosi ndị a maka ụdị nkwado ụdị omenala anyị, klaasị n'akụkụ ihe nkesa nhọrọ, yana ndabara ihe nchọgharị.

Ụdị omenala

Maka ozi nkwado ụdị Bootstrap omenala, ị ga-achọ ịgbakwunye njirimara novalidateboolean na faịlụ <form>. Nke a na-ewepụ ntụzịaka ngwaọrụ nzaghachi ndabara ihe nchọgharị, mana ọ ka na-enye ohere ịnweta API nkwado ụdị na Javascript. Gbalịa nyefee ụdị n'okpuru; Javascript anyị ga-egbochi bọtịnụ ntinye ma nyefee gị nzaghachi. Mgbe ị na-agbalị ịnyefe, ị ga-ahụ :invalidna :validụdị ndị etinyere na njikwa ụdị gị.

Ụdị nzaghachi omenala na-etinye agba, oke, ụdị elekwasị anya, na akara ndabere iji nweta nzaghachi ka mma. Akara ngosi ndabere maka <select>s dị naanị .form-selectna ọ bụghị .form-control.

Ọ mara mma!
Ọ mara mma!
@
Biko họrọ aha njirimara.
Biko nye obodo bara uru.
Biko họrọ steeti bara uru.
Biko nye zip ziri ezi.
Ị ga-ekwenyerịrị tupu ịnyefe.
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)
  })
})()

Nchọgharị ndabara

Enweghị mmasị na ozi nzaghachi nkwado omenala ma ọ bụ ide Javascript iji gbanwee omume ụdị? Ọ dị mma, ịnwere ike iji ndabara ihe nchọgharị ahụ. Gbalịa ịnyefe fọm dị n'okpuru. Dabere na ihe nchọgharị gị na OS, ị ga-ahụ ụdị nzaghachi dịtụ iche.

Ọ bụ ezie na enweghị ike iji CSS hazie ụdị nzaghachi ndị a, ị ka nwere ike hazie ederede nzaghachi site na 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>

Akụkụ nkesa

Anyị na-akwado iji nkwado n'akụkụ ndị ahịa, mana ọ bụrụ na ịchọrọ nkwado n'akụkụ nkesa, ị nwere ike igosi oghere na ezighi ezi yana dị irè yana .is-invalidyana .is-valid. Rịba ama na .invalid-feedbackakwadoro ya na klaasị ndị a.

Maka mpaghara ezighi ezi, hụ na ejikọtara nzaghachi/ozi njehie na-ezighi ezi na mpaghara ụdị dị mkpa site na iji aria-describedby(ịkọba ama na njirimara a na-enye ohere ka edetu ihe karịrị otu id, ma ọ bụrụ na mpaghara ahụ na-arụtụ aka na ederede ụdị ọzọ).

Iji dozie nsogbu na radius oke , otu ntinye chọrọ .has-validationklaasị agbakwunyere.

Ọ mara mma!
Ọ mara mma!
@
Biko họrọ aha njirimara.
Biko nye obodo bara uru.
Biko họrọ steeti bara uru.
Biko nye zip ziri ezi.
Ị ga-ekwenyerịrị tupu ịnyefe.
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>

Ihe akwadoro

Ụdị nkwado dị maka njikwa ụdị na ihe ndị a:

  • <input>s na <textarea>s nwere .form-control(gụnyere ihe ruru otu n'ime otu .form-controlntinye)
  • <select>s na.form-select
  • .form-checks
Biko tinye ozi na mpaghara ederede.
Ọmụmaatụ ederede nzaghachi na-ezighi ezi
Ihe atụ ọzọ ederede nzaghachi na-ezighi ezi
Ọmụmaatụ nzaghachi ahọpụtara ezighi ezi
Ọmụmaatụ nzaghachi faịlụ ụdị ezighi ezi
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>

Ntuziaka ngwaọrụ

Ọ bụrụ na nhazi ụdị gị na-enye ya ohere, ị nwere ike gbanwee .{valid|invalid}-feedbackklaasị maka .{valid|invalid}-tooltipklaasị iji gosipụta nzaghachi nkwado n'ụdị ngwa ọrụ ahaziri. Jide n'aka na ị ga-enwe nne na nna position: relativena ya maka idobe ngwa ọrụ. N'ihe atụ dị n'okpuru, klaasị kọlụm anyị enweela nke a, mana ọrụ gị nwere ike ịchọ nhazi ọzọ.

Ọ mara mma!
Ọ mara mma!
@
Biko họrọ aha njirimara pụrụ iche ma dịkwa irè.
Biko nye obodo bara uru.
Biko họrọ steeti bara uru.
Biko nye zip ziri ezi.
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>

Sass

Mgbanwe

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

Ngwakọta

A na-ejikọta mixins abụọ ọnụ, site na akaghị aka anyị , iji mepụta ụdị nzaghachi nzaghachi ụdị anyị.

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

Maapụ

Nke a bụ maapụ Sass nkwado sitere na _variables.scss. Wepu ma ọ bụ gbasaa nke a ka ịmepụta steeti dị iche iche ma ọ bụ gbakwunyere.

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

Maapụ $form-validation-statesnwere ike ịnwe parampat nhọrọ atọ iji mebie ndụmọdụ ngwaọrụ na ụdị mgbado anya.

Loop

A na-eji ya gụgharịa $form-validation-statesụkpụrụ map iji mepụta ụdị nkwado anyị. Mgbanwe ọ bụla na maapụ Sass dị n'elu ga-egosipụta na CSS gị achịkọtara site na akaghị a.

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

Nhazi

Enwere ike ịhazi steeti nkwado site na Sass yana $form-validation-statesmaapụ. Dị na _variables.scssfaịlụ anyị, maapụ Sass a bụ ka anyị si ewepụta steeti ndabara valid/ invalidnkwado. Agụnyere bụ maapụ akwụ ụgwọ maka ịhazi agba, akara ngosi, ụcha nrụtụ aka na ndò nke steeti ọ bụla. Ọ bụ ezie na enweghị steeti ndị ọzọ nke ihe nchọgharị na-akwado, ndị na-eji ụdị omenala nwere ike itinye nzaghachi ụdị dị mgbagwoju anya ngwa ngwa.