باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

چەسپاندن

پێشکەشکردنی فیدباکێکی بەنرخ و کردار بۆ بەکارهێنەرانت بە چەسپاندنی فۆڕمی HTML5، لە ڕێگەی هەڵسوکەوتی پێشوەختەی وێبگەڕ یان شێوازە تایبەتەکان و جاڤاسکڕێپت.

لەم پەیجەدا
ئێمە ئاگادارین کە لە ئێستادا شێوازەکانی ڕەچاوکردنی تایبەتمەندی لایەنی مشتەری و ئامۆژگارییەکان دەستڕاگەیشتنیان نییە، لەبەرئەوەی بەرکەوتەی تەکنەلۆژیا یارمەتیدەرەکان نین. لە کاتێکدا ئێمە کار لەسەر چارەسەرێک دەکەین، پێشنیار دەکەین یان بژاردەی لایەنی سێرڤەر بەکاربهێنین یان شێوازی چەسپاندنی وێبگەڕی پێشوەختە.

چۆن کاردەکات

لێرەدا چۆنێتی کارکردنی چەسپاندنی فۆڕم لەگەڵ Bootstrap دەبینین:

  • چەسپاندنی فۆڕمی HTML لە ڕێگەی دوو پۆلی ساختەی CSS جێبەجێ دەکرێت، :invalidو :valid. بۆ <input>, <select>, و <textarea>توخمەکان دەگرێتەوە.
  • بووتستراپ مەودای ستایلەکانی :invalidو :validبۆ پۆلی باوک .was-validatedدەکات، بەزۆری بۆ پۆلەکە بەکاردەهێنرێت <form>. ئەگەرنا هەر مەیدانێکی پێویست بەبێ بەها لە کاتی بارکردنی لاپەڕەدا وەک نادروست دەردەکەوێت. بەم شێوەیە، دەتوانیت هەڵبژێریت کەی چالاکیان بکەیت (بە شێوەیەکی گشتی دوای ئەوەی هەوڵی پێشکەشکردنی فۆڕم دەدرێت).
  • بۆ ڕێستکردنی دەرکەوتنی فۆڕمەکە (بۆ نموونە، لە حاڵەتی پێشکەشکردنی فۆڕمی داینامیکی بە بەکارهێنانی AJAX)، .was-validatedپۆلەکە لە <form>دووبارە دوای پێشکەشکردن دەربهێنە.
  • وەکو پاشەکشە، .is-invalidو .is-validپۆلەکان لەوانەیە لەبری پۆلە ساختەکان بۆ چەسپاندنی لایەنی ڕاژەکار بەکاربهێنرێن . ئەوان پێویستیان بە .was-validatedپۆلی دایک و باوک نییە.
  • بەهۆی سنووردارکردن لە چۆنیەتی کارکردنی CSS، ناتوانین (لە ئێستادا) ستایلەکان بۆ a <label>کە پێش کۆنترۆڵی فۆڕمێک لە DOM دێت بەبێ یارمەتی جاڤاسکڕێپتی تایبەت بەکاربهێنین.
  • هەموو وێبگەڕە مۆدێرنەکان پشتگیری لە API ی چەسپاندنی سنووردار دەکەن، زنجیرەیەک شێوازی جاڤاسکڕێپت بۆ چەسپاندنی کۆنتڕۆڵەکانی فۆڕم.
  • ڕەنگە نامەکانی فیدباک لە پێشوەختەی وێبگەڕەکان (جیاواز بۆ هەر وێبگەڕێک، و لە ڕێگەی CSS ەوە ناستایل) یان شێوازەکانی فیدباک تایبەتمان بە HTML و CSSی زیادە کەڵک وەربگرن.
  • دەتوانیت پەیامی ڕەوایی تایبەتمەند لەگەڵ setCustomValidityلە جاڤاسکڕێپتدا دابین بکەیت.

بەو بیرۆکەیە، ئەم دیمۆکانی خوارەوە لەبەرچاو بگرە بۆ شێوازەکانی چەسپاندنی فۆڕمی تایبەتمەندمان، پۆلەکانی لایەنی سێرڤەری هەڵبژاردە و پێشوەختەی وێبگەڕ.

ستایلە تایبەتەکان

بۆ پەیامەکانی چەسپاندنی فۆڕمی Bootstrap تایبەتمەند، پێویستە novalidateتایبەتمەندی boolean زیاد بکەیت بۆ <form>. ئەمەش ئامرازەکانی فیدباکەکانی پێشوەختەی وێبگەڕەکە لەکاردەخات، بەڵام هێشتا دەستڕاگەیشتن بە APIیەکانی چەسپاندنی فۆڕم لە جاڤاسکڕێپتدا دابین دەکات. هەوڵبدە فۆڕمی خوارەوە پێشکەش بکەیت؛ جاڤاسکڕێپتەکەمان دوگمەی ناردن دەگرێت و فیدباکەکانت دەگوازێتەوە. لە کاتی هەوڵدان بۆ پێشکەشکردن، دەبینیت کە :invalidو :validستایلەکان بۆ کۆنتڕۆڵەکانی فۆڕمەکەت جێبەجێ دەکرێن.

شێوازە تایبەتەکانی فیدباک ڕەنگی تایبەتمەند، سنوورەکان، شێوازەکانی فۆکەس و ئایکۆنی پاشبنەما بەکاردەهێنن بۆ باشتر گەیاندنی فیدباک. ئایکۆنی پاشبنەما بۆ <select>s تەنها بە .form-select, بەردەستە و نا .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

وێبگەڕ بە پێشوەختە

ئارەزووی پەیامی فیدباکەکانی ڕەچاوکردنی تایبەتمەند یان نووسینی جاڤاسکڕێپت بۆ گۆڕینی هەڵسوکەوتەکانی فۆڕم نییە؟ هەمووی باشە، دەتوانیت بەپێی پێشوەختەکانی وێبگەڕەکە بەکاربهێنیت. هەوڵبدە فۆڕمی خوارەوە پێشکەش بکەیت. بەپێی وێبگەڕ و سیستەمی کارپێکردنەکەت، شێوازێکی کەمێک جیاوازی فیدباک دەبینیت.

لە کاتێکدا ئەم شێوازانەی فیدباک ناتوانرێت بە CSS ستایل بکرێن، بەڵام دەتوانیت دەقی فیدباکەکە لە ڕێگەی جاڤاسکڕێپتەوە خۆکارانە بکەیت.

@ 
<form class="row g-3">
  <div class="col-md-4">
    <label for="validationDefault01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefault02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
  </div>
  <div class="col-md-4">
    <label for="validationDefaultUsername" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend2">@</span>
      <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationDefault03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationDefault03" required>
  </div>
  <div class="col-md-3">
    <label for="validationDefault04" class="form-label">State</label>
    <select class="form-select" id="validationDefault04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-3">
    <label for="validationDefault05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationDefault05" required>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

لایەنی سێرڤەر

پێشنیار دەکەین کە ڕەچاوکردنی لایەنی مشتەری بەکاربهێنیت، بەڵام لە ئەگەری ئەوەی پێویستت بە ڕەچاوکردنی لایەنی ڕاژەکار هەبێت، دەتوانیت مەیدانی فۆڕمی نادروست و دروست بە و ئاماژە .is-invalidپێبدەیت .is-valid. تێبینی بکە کە .invalid-feedbackلەگەڵ ئەم پۆلانەشدا پشتگیری دەکرێت.

بۆ بواری نادروست، دڵنیابە لەوەی کە پەیامی فیدباک/هەڵەی نادروست پەیوەستە بە بواری فۆڕمی پەیوەندیدار بە بەکارهێنانی aria-describedby(تێبینی بکە کە ئەم تایبەتمەندییە ڕێگە بە زیاتر لە یەکێک idدەدات ئاماژە بکرێت، لە ئەگەری ئەوەی کە مەیدانەکە پێشتر ئاماژە بە دەقی فۆڕمی زیادە بکات).

بۆ چارەسەرکردنی کێشەکان لەگەڵ تیژڕەوی سنوور.has-validation , گروپەکانی چوونەژوورەوە پێویستیان بە پۆلێکی زیادە هەیە .

باش دیارە!
باش دیارە!
@
تکایە ناوی بەکارهێنەرێک هەڵبژێرە.
تکایە شارێکی کارا دابین بکەن.
تکایە دۆخێکی دروست هەڵبژێرە.
تکایە زیپێکی دروست پێشکەش بکە.
پێویستە پێش پێشکەشکردن ڕازی بیت. 
<form class="row g-3">
  <div class="col-md-4">
    <label for="validationServer01" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServer02" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationServerUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend3">@</span>
      <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
      <div id="validationServerUsernameFeedback" class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationServer03" class="form-label">City</label>
    <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
    <div id="validationServer03Feedback" class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer04" class="form-label">State</label>
    <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div id="validationServer04Feedback" class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationServer05" class="form-label">Zip</label>
    <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
    <div id="validationServer05Feedback" class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

توخمە پشتگیریکراوەکان

شێوازەکانی ڕەچاوکردن بۆ ئەم کۆنتڕۆڵ و پێکهاتانەی فۆڕمی خوارەوە بەردەستە:

  • <input>s و <textarea>s لەگەڵ .form-control(لەوانەش تا یەکێک .form-controlلە گروپەکانی هاتنەژوورەوە)
  • <select>s لەگەڵ.form-select
  • .form-checkس
تکایە نامەیەک لە ناوچەی نووسین دابنێ.
نموونەی دەقی فیدباکێکی نادروست
نموونەی زیاتر دەقی فیدباکێکی نادروست
نموونە فیدباکێکی هەڵبژاردەی نادروست
نموونەی فیدباکێکی نادروستی پەڕگەی فۆڕم 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea" class="form-label">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
    <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="form-check">
    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
  </div>
  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
    <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="form-select" required aria-label="select example">
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid select feedback</div>
  </div>

  <div class="mb-3">
    <input type="file" class="form-control" aria-label="file example" required>
    <div class="invalid-feedback">Example invalid form file feedback</div>
  </div>

  <div class="mb-3">
    <button class="btn btn-primary" type="submit" disabled>Submit form</button>
  </div>
</form>

ئامۆژگاری ئامرازەکان

ئەگەر شێوازی فۆڕمەکەت ڕێگەی پێدا، دەتوانیت پۆلەکان بگۆڕیتەوە .{valid|invalid}-feedbackبۆ .{valid|invalid}-tooltipپۆلەکان بۆ پیشاندانی فیدباکەکانی چەسپاندن لە ئامرازێکی ستایلداردا. دڵنیابە کە دایک و باوکێک position: relativeلەسەری بێت بۆ جێگیرکردنی ئامۆژگاری ئامێرەکان. لە نموونەی خوارەوەدا، پۆلەکانی ستوونی ئێمە پێشتر ئەمەیان هەیە، بەڵام ڕەنگە پڕۆژەکەت پێویستی بە ڕێکخستنێکی بەدیل هەبێت.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
    <div class="valid-tooltip">
      Looks good!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
    <div class="valid-tooltip">
      Looks good!
    </div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltipUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
      <div class="invalid-tooltip">
        Please choose a unique and valid username.
      </div>
    </div>
  </div>
  <div class="col-md-6 position-relative">
    <label for="validationTooltip03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationTooltip03" required>
    <div class="invalid-tooltip">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip04" class="form-label">State</label>
    <select class="form-select" id="validationTooltip04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-tooltip">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3 position-relative">
    <label for="validationTooltip05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationTooltip05" required>
    <div class="invalid-tooltip">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

ساس

گۆڕاوەکان

$form-feedback-margin-top:          $form-text-margin-top;
$form-feedback-font-size:           $form-text-font-size;
$form-feedback-font-style:          $form-text-font-style;
$form-feedback-valid-color:         $success;
$form-feedback-invalid-color:       $danger;

$form-feedback-icon-valid-color:    $form-feedback-valid-color;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

میکسینەکان

دوو میکسین پێکەوە کۆدەکرێنەوە، لە ڕێگەی لوپەکەمانەوە ، بۆ دروستکردنی شێوازەکانی فیدباکەکانی چەسپاندنی فۆرممان.

@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    .was-validated #{if(&, "&", "")}:#{$state},
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

@mixin form-validation-state(
  $state,
  $color,
  $icon,
  $tooltip-color: color-contrast($color),
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
  .#{$state}-feedback {
    display: none;
    width: 100%;
    margin-top: $form-feedback-margin-top;
    @include font-size($form-feedback-font-size);
    font-style: $form-feedback-font-style;
    color: $color;
  }

  .#{$state}-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%; // Contain to parent when possible
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
    margin-top: .1rem;
    @include font-size($form-feedback-tooltip-font-size);
    line-height: $form-feedback-tooltip-line-height;
    color: $tooltip-color;
    background-color: $tooltip-bg-color;
    @include border-radius($form-feedback-tooltip-border-radius);
  }

  @include form-validation-state-selector($state) {
    ~ .#{$state}-feedback,
    ~ .#{$state}-tooltip {
      display: block;
    }
  }

  .form-control {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-image: escape-svg($icon);
        background-repeat: no-repeat;
        background-position: right $input-height-inner-quarter center;
        background-size: $input-height-inner-half $input-height-inner-half;
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }
    }
  }

  // stylelint-disable-next-line selector-no-qualifying-type
  textarea.form-control {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
      }
    }
  }

  .form-select {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        &:not([multiple]):not([size]),
        &:not([multiple])[size="1"] {
          padding-right: $form-select-feedback-icon-padding-end;
          background-image: escape-svg($form-select-indicator), escape-svg($icon);
          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
        }
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }
    }
  }

  .form-check-input {
    @include form-validation-state-selector($state) {
      border-color: $color;

      &:checked {
        background-color: $color;
      }

      &:focus {
        box-shadow: $focus-box-shadow;
      }

      ~ .form-check-label {
        color: $color;
      }
    }
  }
  .form-check-inline .form-check-input {
    ~ .#{$state}-feedback {
      margin-left: .5em;
    }
  }

  .input-group .form-control,
  .input-group .form-select {
    @include form-validation-state-selector($state) {
      @if $state == "valid" {
        z-index: 1;
      } @else if $state == "invalid" {
        z-index: 2;
      }
      &:focus {
        z-index: 3;
      }
    }
  }
}

نەخشە

ئەمە نەخشەی چەسپاندنی ساسە لە _variables.scss. ئەمە سەرپێچی بکە یان درێژ بکەرەوە بۆ دروستکردنی باری جیاواز یان زیادە.

$form-validation-states: (
  "valid": (
    "color": $form-feedback-valid-color,
    "icon": $form-feedback-icon-valid
  ),
  "invalid": (
    "color": $form-feedback-invalid-color,
    "icon": $form-feedback-icon-invalid
  )
);

نەخشەکانی $form-validation-statesدەتوانن سێ پارامێتری هەڵبژاردەیی لەخۆ بگرن بۆ سەرپێچیکردنی ئامرازەکان و شێوازەکانی فۆکەس.

ئەڵقە

بەکاردێت بۆ دووبارەکردنەوە لەسەر $form-validation-statesبەهاکانی نەخشە بۆ دروستکردنی شێوازەکانی چەسپاندنمان. هەر گۆڕانکارییەک لە نەخشەی Sass ی سەرەوەدا لە CSS ی کۆکراوەکەتدا لە ڕێگەی ئەم لوپە ڕەنگ دەداتەوە.

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

خۆکارکردن

دەتوانرێت دۆخی چەسپاندن لە ڕێگەی ساسەوە لەگەڵ $form-validation-statesنەخشەکەدا خۆکارانە بکرێت. _variables.scssئەم نەخشەیە لە فایلەکەماندا هەڵکەوتووە ، چۆنێتی دروستکردنی دۆخی پێشوەختە valid/ invalidڕەچاوکردنە. نەخشەیەکی هێلانەکراو لەخۆدەگرێت بۆ خۆکارکردنی ڕەنگ و ئایکۆن و ڕەنگی ئامۆژگاری و سێبەری فۆکەسی هەر ویلایەتێک. لە کاتێکدا هیچ ویلایەتێکی تر لەلایەن وێبگەڕەکانەوە پشتگیری ناکرێت، ئەوانەی ستایلە تایبەتمەندەکان بەکاردەهێنن دەتوانن بە ئاسانی فیدباکەکانی فۆڕمی ئاڵۆزتر زیاد بکەن.

تکایە ئاگاداربە کە ئێمە پێشنیاری خۆکارکردنی بەهاکان ناکەین بەبێ ئەوەی میکسینەکەش $form-validation-statesدەستکاریform-validation-state بکەیت .