Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

Hōʻoia

Hāʻawi i nā manaʻo manaʻo koʻikoʻi a hiki ke hana ʻia i kāu mea hoʻohana me ka hōʻoia ʻana o ka palapala HTML5, ma o nā ʻano hana paʻamau o ka polokalamu kele pūnaewele a i ʻole nā ​​ʻano kuʻuna a me JavaScript.

Ma kēia ʻaoʻao
ʻIke mākou i kēia manawa ʻaʻole hiki ke ʻike ʻia nā ʻano hōʻoia maʻamau o ka ʻaoʻao o nā mea kūʻai aku, no ka mea ʻaʻole lākou i ʻike ʻia i nā ʻenehana kōkua. ʻOiai mākou e hana nei i kahi hoʻonā, manaʻo mākou e hoʻohana i ke koho ʻaoʻao kikowaena a i ʻole ke ʻano hōʻoia ʻana o ka polokalamu kele pūnaewele.

Pehea e hana ai

Eia ke ʻano o ka hana ʻana o ka palapala hōʻoia me Bootstrap:

  • Hoʻohana ʻia ka hōʻoia palapala HTML ma o nā papa pseudo ʻelua o CSS, :invalida me :valid. Pili ia i <input>, <select>, a me <textarea>nā mea.
  • Hoʻopili ʻo Bootstrap i nā ʻano :invalida me :validnā ʻano i ka papa makua .was-validated, i hoʻohana pinepine ʻia i ka <form>. A i ʻole, ʻike ʻole ʻia kekahi kahua i koi ʻia me ka waiwai ʻole ma ka hoʻouka ʻana i ka ʻaoʻao. Ma kēia ala, hiki iā ʻoe ke koho i ka wā e hoʻāla ai iā lākou (maʻamau ma hope o ka hoʻāʻo ʻia ʻana o ka palapala).
  • No ka hoʻihoʻi hou ʻana i ke ʻano o ke ʻano (no ka laʻana, ma ke ʻano o ka hoʻouna ʻana i nā palapala hoʻoikaika me ka hoʻohana ʻana iā AJAX), e wehe i ka .was-validatedpapa mai ka papa <form>ma hope o ka waiho ʻana.
  • Ma ke ʻano he hāʻule, .is-invalida .is-validhiki ke hoʻohana ʻia nā papa ma kahi o nā pseudo-classes no ka hōʻoia ʻaoʻao server . ʻAʻole lākou makemake i kahi .was-validatedpapa makua.
  • Ma muli o ke kaohi ʻana i ka hana ʻana o CSS, ʻaʻole hiki iā mākou (i kēia manawa) ke hoʻopili i nā kaila i kahi <label>e hiki mai ana ma mua o ka mana o ka puka ma ka DOM me ke kōkua ʻole o ka JavaScript maʻamau.
  • Kākoʻo nā mākaʻikaʻi hou a pau i ka API hoʻopaʻa paʻa , he pūʻulu o nā ala JavaScript no ka hōʻoia ʻana i nā mana palapala.
  • Hiki i nā memo manaʻo ke hoʻohana i nā mea paʻa o ka polokalamu kele pūnaewele (ʻokoʻa no kēlā me kēia polokalamu kele pūnaewele, a hiki ʻole ke hoʻopaʻa ʻia ma o CSS) a i ʻole kā mākou ʻano manaʻo manaʻo maʻamau me HTML a me CSS hou.
  • Hiki iā ʻoe ke hāʻawi i nā memo kūpono maʻamau me setCustomValidityka JavaScript.

Me ka noʻonoʻo ʻana, e noʻonoʻo i nā demos aʻe no kā mākou ʻano hōʻoia ʻano maʻamau, nā papa ʻaoʻao kikowaena koho, a me nā paʻa ʻole o ka polokalamu kele pūnaewele.

Nā ʻano maʻamau

No nā memo hōʻoia puka Bootstrap maʻamau, pono ʻoe e hoʻohui i ke novalidateʻano boolean i kāu <form>. Hoʻopau kēia i nā ʻōlelo aʻoaʻo manaʻo paʻamau o ka polokalamu kele pūnaewele, akā hāʻawi mau i ke komo i nā API hōʻoia palapala ma JavaScript. E ho'āʻo e waiho i ka palapala ma lalo nei; kā mākou JavaScript e hoʻopau i ke pihi hoʻouna a hāʻawi i nā manaʻo iā ʻoe. Ke ho'āʻo nei e hoʻouna, e ʻike ʻoe i nā ʻano :invalida me :validnā ʻano i hoʻopili ʻia i kāu kaohi puka.

Hoʻopili nā ʻano manaʻo manaʻo maʻamau i nā kala maʻamau, nā palena, nā ʻano kikoʻī, a me nā kiʻi ʻoniʻoni i hope e kamaʻilio maikaʻi i nā manaʻo. Loaʻa nā kiʻiona hope no <select>s me .form-select, ʻaʻole .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.
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)
  })
})()

Mea hoʻohana paʻamau

ʻAʻole makemake i nā memo manaʻo hōʻoia maʻamau a i ʻole ke kākau ʻana iā JavaScript e hoʻololi i nā ʻano hana? Maikaʻi nā mea a pau, hiki iā ʻoe ke hoʻohana i ka polokalamu kele pūnaewele. E ho'āʻo e hoʻouna i ka palapala ma lalo nei. Ma muli o kāu polokalamu kele pūnaewele a me OS, e ʻike ʻoe i kahi ʻano manaʻo ʻokoʻa iki.

ʻOiai ʻaʻole hiki ke kapa ʻia kēia mau ʻano manaʻo me CSS, hiki iā ʻoe ke hana i ka kikokikona manaʻo ma o 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>

ʻaoʻao kikowaena

Manaʻo mākou e hoʻohana i ka hōʻoia ʻaoʻao o ka mea kūʻai aku, akā inā makemake ʻoe i ka hōʻoia ʻaoʻao server, hiki iā ʻoe ke hōʻike i nā kahua palapala kūpono ʻole a .is-invalidme .is-valid. E hoʻomaopopo i .invalid-feedbackkākoʻo pū ʻia me kēia mau papa.

No nā kahua kūpono ʻole, e hōʻoia i ka pili ʻana o ka manaʻo manaʻo kūpono ʻole/hewa me ke kahua puka kūpono me ka hoʻohana aria-describedbyʻana (me ka ʻike ʻana e hiki i kēia idʻano ke hiki ke kuhikuhi ʻia ma mua o hoʻokahi, inā ua kuhikuhi mua ke kahua i kahi kikokikona puka hou).

No ka hoʻoponopono ʻana i nā pilikia me ka radius palena , pono nā hui hoʻokomo i kahi .has-validationpapa hou.

Nani ka maikaʻi!
Nani ka maikaʻi!
@
E ʻoluʻolu e koho i kahi mea hoʻohana.
E ʻoluʻolu e hāʻawi i ke kūlanakauhale kūpono.
E ʻoluʻolu e koho i kahi mokuʻāina kūpono.
E ʻoluʻolu e hāʻawi i kahi zip kūpono.
Pono ʻoe e ʻae ma mua o ka waiho ʻana.
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>

Nā mea i kākoʻo ʻia

Loaʻa nā ʻano hōʻoia no nā ʻano mana a me nā ʻāpana:

  • <input>s a me <textarea>s me .form-control(me ka hoʻokahi .form-controli loko o nā pūʻulu hoʻokomo)
  • <select>s me.form-select
  • .form-checks
E ʻoluʻolu e hoʻokomo i kahi memo ma ka textarea.
He laʻana kikokikona manaʻo manaʻo kūpono ʻole
Eia kekahi laʻana kikokikona manaʻo manaʻo kūpono ʻole
Laʻana manaʻo koho hewa ʻole
He laʻana manaʻo manaʻo manaʻo kūpono ʻole
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>

Mea kōkua

Inā ʻae kāu hoʻolālā palapala, hiki iā ʻoe ke hoʻololi i nā .{valid|invalid}-feedbackpapa no .{valid|invalid}-tooltipnā papa e hōʻike i nā manaʻo manaʻo hōʻoia i loko o kahi hāmeʻa kaila. Pono e loaʻa kahi makua me position: relativeia no ka hoʻonohonoho ʻana i nā mea hana. Ma ka laʻana ma lalo nei, ua loaʻa kēia i kā mākou papa kolamu, akā makemake paha kāu papahana i kahi hoʻonohonoho ʻokoʻa.

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

Nā mea hoʻololi

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

Mea huikau

Hoʻohui ʻia ʻelua mixins, ma o kā mākou loop , e hoʻohua i kā mākou ʻano manaʻo manaʻo hōʻoia.

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

Palapala ʻāina

ʻO kēia ka palapala Sass hōʻoia mai _variables.scss. Hoʻopau a hoʻonui paha i kēia no ka hoʻokumu ʻana i nā mokuʻāina ʻē aʻe.

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

Hiki ke loa'a i nā palapala 'āina o $form-validation-statesnā palena koho 'ekolu no ka ho'opau 'ana i nā mea paahana a me nā kaila kālele.

Loop

Hoʻohana ʻia no ka hoʻomaʻamaʻa ʻana i $form-validation-statesnā waiwai palapala e hoʻohua i kā mākou ʻano hōʻoia. E hōʻike ʻia nā hoʻololi i ka palapala ʻāina Sass ma luna o kāu CSS i hui ʻia ma o kēia loop.

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

Hoʻopilikino

Hiki ke hoʻopilikino ʻia nā mokuʻāina hōʻoia ma o Sass me ka $form-validation-statespalapala ʻāina. Aia i loko o kā mākou _variables.scssfaila, ʻo kēia palapala ʻāina Sass ke ʻano o kā mākou hana ʻana i nā mokuʻāina paʻamau valid/ invalidhōʻoia. Hoʻokomo ʻia kahi palapala ʻāina no ka hoʻopilikino ʻana i ka waihoʻoluʻu o kēlā me kēia mokuʻāina, ikona, kala hāmeʻa, a me ke aka nānā. ʻOiai ʻaʻohe mokuʻāina ʻē aʻe i kākoʻo ʻia e nā mākaʻikaʻi, hiki i ka poʻe e hoʻohana ana i nā ʻano maʻamau ke hoʻohui maʻalahi i nā manaʻo manaʻo paʻakikī.