in English

Ku tiyisisiwa ka swilo

Nyika vuyelo bya nkoka, lebyi nga tekiwaka goza eka vatirhisi va wena hi ku tiyisisiwa ka fomo ya HTML5, hi ku tirhisa mahanyelo ya xiviri ya xihlamusela-marito kumbe switayele swa ntolovelo na JavaScript.

Eka tluka leri

Ha swi tiva leswaku sweswi switayele swa ku tiyisisiwa ka ntolovelo swa tlhelo ra xilayenti na switsundzuxo swa switirhisiwa a swi fikeleleki, tanihileswi swi nga hlanganangiki na thekinoloji yo pfuneta. Loko hi ri karhi hi tirha eka ntlhantlho, hi nga ringanyeta ku tirhisa nhlawulo wa le tlhelo ra sevha kumbe ndlela ya ku tiyisisa xihlamusela-marito xa ntolovelo.

Ndlela leyi swi tirhaka ha yona

Hi leyi ndlela leyi ku tiyisisiwa ka fomo ku tirhaka ha yona hi Bootstrap:

Ku tiyisisiwa ka fomo ya HTML ku tirhisiwa hi ku tirhisa titlilasi timbirhi ta vuxisi ta CSS, :invalidna :valid. Yi tirha eka <input>, <select>, na <textarea>swiaki.
Bootstrap yi hlanganisa switayele swa :invalidna :valideka tlilasi ya mutswari .was-validated, hi ntolovelo swi tirhisiwa eka <form>. Handle ka sweswo, nsimu yihi na yihi leyi lavekaka leyi nga riki na ntikelo yi kombisa tanihi leyi nga tirhiki eka ku layicha pheji. Hi ndlela leyi, u nga ha hlawula leswaku u ta ti tirhisa rini (hi ntolovelo endzhaku ka loko ku ringetiwile ku rhumela fomo).
Ku tlhela u veka xivumbeko xa fomo (xikombiso, eka xiyimo xa ku rhumeriwa ka fomo leyi cinca-cincaka hi ku tirhisa AJAX), susa .was-validatedtlilasi eka <form>nakambe endzhaku ko rhumela.
Tanihi fallback, .is-invalidnaswona .is-validtitlilasi ti nga tirhisiwa ematshan’wini ya titlilasi ta vuxisi ta ku tiyisisiwa ka tlhelo ra sevha . A va lavi .was-validatedtlilasi ya mutswari.
Hikwalaho ka swipimelo eka ndlela leyi CSS yi tirhaka ha yona, a hi nge (sweswi) tirhisa switayele eka a <label>leyi taka emahlweni ka vulawuri bya fomo eka DOM handle ko pfuniwa hi JavaScript ya ntolovelo.
Swihlamusela-marito hinkwaswo swa manguva lawa swi seketela API ya ku tiyisisa swipimelo , nxaxamelo wa tindlela ta JavaScript to tiyisisa vulawuri bya fomo.
Mahungu ya vuyelo ma nga ha tirhisa swilo leswi nga riki swa xiviri swa xihlamusela-marito (leswi hambaneke eka xihlamusela-marito xin’wana ni xin’wana, naswona swi nga cinciwi hi ku tirhisa CSS) kumbe switayele swa hina swa vuyelo lebyi endleriweke hi ku tirhisa HTML ni CSS leyi engetelekeke.
U nga ha nyika marungula ya ntiyiso ya ntolovelo na setCustomValidityeka JavaScript.

Hi ku tsundzuka sweswo, xiya ti-demo leti landzelaka ta switayele swa hina swa ku tiyisisiwa ka fomo ya ntolovelo, titlilasi ta le tlhelo ra sevha leti nga hlawuriwa, ni swilo leswi nga riki swa xiviri swa xihlamusela-marito.

Switayili swa ntolovelo

Eka marungula ya ku tiyisisa fomo ya Bootstrap ya ntolovelo, u ta lava ku engetela novalidatexihlawulekisi xa boolean eka <form>. Leswi swi tshikisa switsundzuxo swa vuyelo bya xiviri bya xihlamusela-marito, kambe swa ha nyika mfikelelo eka ti-API ta ku tiyisisa fomo eka JavaScript. Ringeta ku rhumela fomo leyi nga laha hansi; JavaScript ya hina yi ta kavanyeta buti yo rhumela ivi yi ku hundzisela vuxokoxoko. Loko u ringeta ku rhumela, u ta vona :invalidna :validswitayele swi tirhisiwa eka vulawuri bya wena bya fomo.

Switayili swa mbuyelo wa ntolovelo swi tirhisa mihlovo ya ntolovelo, mindzilakano, switayele swa ku kongomisa, na swifaniso swa le ndzhaku ku hlanganisa mbuyelo ku antswa. Swifaniso swa le ndzhaku swa <select>s swi kumeka ntsena hi .form-select, naswona a hi .form-control.

Vito rosungula

Swi languteka swi ri kahle!

Xivongo

Swi languteka swi ri kahle!

Vito ra mutirhisi

Hi kombela u hlawula vito ra mutirhisi.

Doroba

Hi kombela u nyika doroba leri tirhaka.

Hlamusela

Hi kombela u hlawula xiyimo lexi tirhaka.

Zip

Hi kombela u nyika zip leyi tirhaka.

Pfumelelana na milawu ni swipimelo

U fanele ku pfumela u nga si rhumela.

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

Swivumbeko swa xihlamusela-marito

A wu tsakeli marungula ya vuyelo bya ku tiyisisiwa ka ntolovelo kumbe ku tsala JavaScript ku cinca mahanyelo ya fomo? Hinkwaswo swi kahle, u nga tirhisa ti-default ta browser. Ringeta ku rhumela fomo leyi nga laha hansi. Ku ya hi browser ya wena na OS, u ta vona xitayili lexi hambaneke nyana xa vuxokoxoko.

Loko switayele leswi swa mbuyelo swi nga ta ka swi nga endliwi xitayili hi CSS, wa ha kota ku lulamisa tsalwa ra mbuyelo hi ku tirhisa 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>

Xiphemu xa sevha

Hi ringanyeta ku tirhisa ku tiyisisiwa ka tlhelo ra xilayenti, kambe loko ko tshuka ku ri leswaku u lava ku tiyisisiwa ka tlhelo ra sevha, u nga kombisa tinsimu ta fomo leti nga tirhiki ni leti tirhaka hi .is-invalidna .is-valid. Xiya leswaku .invalid-feedbackna swona swi seketeriwa hi titlilasi leti.

Eka tinsimu leti nga tirhiki, tiyisisa leswaku rungula ra mbuyelo/xihoxo leri nga tirhiki ri fambelanisiwa na nsimu ya fomo leyi faneleke hi ku tirhisa aria-describedby(xiya leswaku xihlawulekisi lexi xi pfumelela ku tlula yin’we idku kongomisiwa, loko ku ri leswaku nsimu se yi kombetela eka tsalwa ra fomo yo engetela).

Ku lulamisa timhaka ta radius ya ndzilakano.has-validation , mintlawa ya swingheniso yi lava tlilasi yo engetela .

Vito rosungula

Swi languteka swi ri kahle!

Xivongo

Swi languteka swi ri kahle!

Vito ra mutirhisi

Hi kombela u hlawula vito ra mutirhisi.

Doroba

Hi kombela u nyika doroba leri tirhaka.

Hlamusela

Hi kombela u hlawula xiyimo lexi tirhaka.

Zip

Hi kombela u nyika zip leyi tirhaka.

Pfumelelana na milawu ni swipimelo

U fanele ku pfumela u nga si rhumela.

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>

Swiaki leswi seketeriwaka

Switayili swa ku tiyisisa swa kumeka eka vulawuri bya fomo na swiphemu leswi landzelaka:

<input>s na <textarea>s na .form-control(ku katsa ku fika eka yin’we .form-controleka mintlawa ya swingheniso) .
<select>s na.form-select
.form-checks

Ndhawu ya matsalwa

Hi kombela u nghenisa rungula eka ndhawu ya matsalwa.

Cheka bokisi leri ro kambela

Xikombiso xa tsalwa ra mbuyelo leri nga tirhiki

Toggle xiya-ni-moya lexi

Kumbe u cinca-cinca xiya-ni-moya lexi xin’wana

Xikombiso xo tala tsalwa ra mbuyelo leri nga tirhiki

Xikombiso xa vuyelo byo hlawula lebyi nga tirhiki

Xikombiso xa mbuyelo wa fayili ya fomo leyi nga tirhiki

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>

Switsundzuxo swa Switirhisiwa

Loko xivumbeko xa wena xa fomo xi swi pfumelela, u nga cincana .{valid|invalid}-feedbacktitlilasi hi .{valid|invalid}-tooltiptitlilasi ku kombisa mbuyelo wa ku tiyisisa eka xitsundzuxo xa xitirhisiwa lexi nga na xitayili. Tiyisisa leswaku u na mutswari loyi a nga na position: relativeyena eka tooltip positioning. Eka xikombiso lexi nga laha hansi, titlilasi ta hina ta tikholomu se ti na leswi, kambe phurojeke ya wena yi nga ha lava ku lulamisiwa kun’wana.

Vito rosungula

Xivongo

Vito ra mutirhisi

Doroba

Hlamusela

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

Swilo leswi cinca-cincaka

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

Ti- mixins

Ti mixins timbirhi ti hlanganisiwa swin’we, hi ku tirhisa loop ya hina , ku tumbuluxa switayele swa hina swa mbuyelo wa ku tiyisisa fomo.

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

Mepe

Leyi i mepe wa Sass wa ku tiyisisa ku suka eka _variables.scss. Tlula kumbe ku andlala leswi ku tumbuluxa swiyimo swo hambana kumbe swo engetela.

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

Mimepe ya $form-validation-statesyi nga va na tipharamitha tinharhu to hlawula ku tlula switsundzuxo swa switirhisiwa na switayele swo kongomisa.

Xintambyana

Ku tirhisiwa ku phindha-phindha ehenhla ka $form-validation-statesmimpimo ya mepe ku humesa switayele swa hina swa ku tiyisisa. Ku cinca kwihi na kwihi eka mepe wa Sass lowu nga laha henhla ku ta kombisiwa eka CSS ya wena leyi hlengeletiweke hi ku tirhisa xirhendzevutana lexi.

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

Ku endla swilo hi ku landza swilaveko swa wena

Swiyimo swa ku tiyisisa swi nga endliwa hi ku tirhisa Sass hi $form-validation-statesmepe. Yi kumeka eka fayili ya hina _variables.scss, mepe lowu wa Sass i ndlela leyi hi tumbuluxaka swiyimo swa default valid/ invalidvalidation. Ku katsiwile mepe lowu pfanganisiweke wa ku cinca muvala wa xiyimo xin’wana ni xin’wana, xifaniso, muvala wa xitsundzuxo xa xitirhisiwa ni ndzhuti wa ku kongomisa. Hambileswi ku nga riki na swifundzha swin’wana leswi seketeriwaka hi swihlamusela-marito, lava tirhisaka switayele swa ntolovelo va nga engetela hi ku olova vuyelo bya fomo lebyi rharhanganeke swinene.