ምጽዳቕ

ንተጠቀምትኻ ብኤችቲኤምኤል5 ቅጥዒ ምጽዳቕ፡ ብመንገዲ ነባሪ ባህርያት መርበብ ሓበሬታ ወይ ብሕታዊ ቅዲታትን ጃቫስክሪፕትን ኣቢልካ፡ ንተጠቀምትኻ ክቡር፡ ተግባራዊ ዝኾነ ግብረ መልሲ ምሃብ።

ኣብዚ ገጽ

ኣብዚ እዋን እዚ እቶም ብወገን ዓሚል ዝቐርቡ ብሕታዊ ቅዲታት ምጽዳቕን መሳርሒታትን ተበጻሕቲ ከምዘይኮኑ ንፈልጥ ኢና፣ ምኽንያቱ ንሓገዝቲ ቴክኖሎጂታት ስለዘይቃልዑ። ኣብ ፍታሕ ክንሰርሕ ከለና፡ ወይ ብወገን ኣገልጋሊ ዝግበር ኣማራጺ ወይ ድማ ነቲ ነባሪ ኣገባብ ምጽራይ መርበብ ሓበሬታ ክንጥቀም ምመኸርና።

ከመይ ይሰርሕ

ቅጥዒ ምጽዳቕ ምስ ቡትስትራፕ ብኸመይ ከም ዝሰርሕ ኣብዚ ኣሎ፤

ናይ HTML ቅጥዒ ምጽዳቕ ብመንገዲ ናይ CSS ክልተ ናይ ሓሶት ክፍልታት ይትግበር፣ :invalidከምኡውን :valid. <input>ን ፣ <select>፣ ከምኡውን <textarea>ባእታታት ይምልከት ።
ቡትስትራፕ ነቲ :invalidand :validቅዲታት ናብ ወላዲ .was-validatedክፍሊ ይሽፍኖ፣ መብዛሕትኡ ግዜ ኣብቲ <form>. እንተዘይኮይኑ ዝኾነ ዋጋ ዘይብሉ ዘድሊ ዓውዲ ኣብ ጽዕነት ገጽ ከም ዘይሕጋዊ ኮይኑ ይረአ። በዚ መንገዲ እዚ፡ መዓስ ከም እተነቓቕሖም ክትመርጽ ትኽእል ኢኻ (ብተለምዶ ድሕሪ ቅጥዒ ምቕራብ ምፍታን)።
መልክዕ ናይቲ ቅጥዒ ዳግማይ ንምትዕርራይ (ንኣብነት፡ ኣብ ጉዳይ ዳይናሚክ ቅጥዒ ምቕራብ AJAX ብምጥቃም)፡ ነቲ .was-validatedክፍሊ ካብቲ <form>ዳግማይ ድሕሪ ምቕራብ ኣውጽእዎ።
ከም ምምላስ፣ .is-invalidከምኡውን ክፍልታት ኣብ ክንዲ እቶም ናይ ሓሶት ክፍልታት ንናይ ኣገልጋሊ-ወገን ምጽዳቕ.is-valid ክጥቀሙ ይኽእሉ . ናይ ወላዲ ክፍሊ ኣየድልዮምን እዩ ።.was-validated
<label>ብሰንኪ ደረታት ኣብ ከመይ ከም ዝሰርሕ CSS ፡ ብዘይ ሓገዝ ብሕታዊ ጃቫስክሪፕት ኣብ DOM ቅድሚ ቅጥዒ ቁጽጽር ዝመጽእ ቅዲታት (ኣብዚ እዋን) ክንትግብሮ ኣይንኽእልን ኢና ።
ኩሎም ዘመናውያን ዳህሰስቲ ነቲ ናይ ምድራት ምጽዳቕ ኤፒኣይ ይድግፉ ፣ እዚ ድማ ንመቆጻጸሪ ቅጥዒ ንምርግጋጽ ዝሕግዝ ተኸታታሊ ሜላታት ጃቫስክሪፕት እዩ።
መልእኽትታት ግብረ-መልሲ ነቲ ናይ መርበብ ሓበሬታ ነባሪ ነገራት (ንነፍሲ ወከፍ መርበብ ሓበሬታ ዝተፈላለየ፡ ብመንገዲ CSS ድማ ቅዲ ዘይብሉ) ወይ ድማ ነቲ ብሕታዊ ቅዲታት ግብረ-መልሲና ምስ ተወሳኺ HTMLን CSSን ክጥቀሙ ይኽእሉ።
setCustomValidityብሕታዊ ናይ ቅኑዕነት መልእኽትታት ምስ ኣብ ጃቫስክሪፕት ክትህብ ትኽእል ኢኻ ።

ነዚ ኣብ ግምት ብምእታው፡ ነዞም ዝስዕቡ ዲሞታት ንብሕታዊ ቅዲታት ምጽራይ ቅጥዕና፡ ኣማራጺ ብወገን ኣገልጋሊ ክፍልታትን ነባሪታት መርበብ ሓበሬታን ኣብ ግምት ኣእትዉ።

ብሕታዊ ቅዲታት

novalidateንብሕታዊ ናይ Bootstrap ቅጥዒ ምጽዳቕ መልእኽትታት፡ ነቲ ቡልያን ባህሪ ኣብቲ ናትካ ክትውስኾ ከድልየካ እዩ <form>። እዚ ነቲ ናይ መርበብ ሓበሬታ ነባሪ ናይ ግብረ መልሲ መሳርሒታት ምኽርታት የሰናኽሎ፣ ግን ሕጂ’ውን ናብቶም ኣብ ጃቫስክሪፕት ዘለዉ ናይ ቅጥዒ ምጽዳቕ ኤፒኣይታት መእተዊ ይህብ። ኣብ ታሕቲ ዘሎ ቅጥዒ ከተቕርቡ ፈትኑ፤ ጃቫስክሪፕትና ነቲ submit ዝብል መጠወቒ ዓጊቱ ግብረ መልሲ ክህበኩም እዩ። ከተቕርብ ኣብ እትፍትነሉ እዋን ፡ ኣብ ቁጽጽር ቅጥዕኻ ዝትግበሩን ቅዲታትን :invalidክትዕዘብ ኢኻ ።:valid

ብሕታዊ ቅዲታት ግብረ መልሲ ብሕታዊ ሕብርታት፣ ዶባት፣ ቅዲታት ትኹረትን ድሕረ ባይታ ምልክታትን ብምትግባር ግብረ መልሲ ብዝበለጸ ንምትሕልላፍ ይጥቀሙ። ድሕረ ባይታ ምልክታት ን <select>s ምስ ጥራይ እዮም ዝርከቡ .form-select፣ ኣይኮኑን .form-control።

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

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  'use strict'

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

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

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

ብራውዘር ነባሪ ይኸውን

ብሕታዊ ናይ ምጽዳቕ ግብረ መልሲ መልእኽትታት ወይ ንባህርያት ቅጥዒ ንምቕያር ጃቫስክሪፕት ምጽሓፍ ተገዳስነት የብልካን? ኩሉ ጽቡቕ፡ ናይ መርበብ ሓበሬታ ነባሪ ክትጥቀም ትኽእል ኢኻ። ኣብ ታሕቲ ዘሎ ቅጥዒ ከተቕርቡ ፈትኑ። ከከም መርበብ ሓበሬታኻን ኦኤስካን ቁሩብ ዝተፈልየ ቅዲ ግብረ መልሲ ክትሪኢ ኢኻ።

እዞም ቅዲታት ግብረ መልሲ ብሲኤስኤስ ቅዲ ክግበሩ ዘይክእሉ እኳ እንተኾኑ፡ ሕጂ’ውን ነቲ ጽሑፍ ግብረ መልሲ ብመንገዲ ጃቫስክሪፕት ክትቅይሮ ትኽእል ኢኻ።

<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>ስ ምስ.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ንመሳርሒ ምኽሪ ኣቀማምጣ ዝኸውን ወላዲ ኣብ ልዕሊኡ ምህላውካ ኣረጋግጽ ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ናይ ዓምዲ ክፍልታትና ድሮ እዚ ኣለዎም፡ ግን ፕሮጀክትካ ኣማራጺ ምድላው ከድልዮ ይኽእል እዩ።

<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 map ብመንገዲ እዚ ሉፕ ኣብቲ ዝተጠርነፈ CSS ይንጸባረቕ።

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

ምምዕርራይ ምግባር

ናይ ምጽዳቕ ኩነታት ብመንገዲ Sass ምስቲ $form-validation-statesካርታ ክመዓራረዩ ይኽእሉ። ኣብ _variables.scssፋይልና ዝርከብ እዚ Sass map ብኸመይ ነባሪ valid/ invalidvalidation states ከም እነመንጩ እዩ። ኣብዚ ናይ ነፍሲ ወከፍ ግዝኣት ሕብሪ፣ ምልክት፣ ሕብሪ ምኽሪ መሳርሒን ጽላሎት ፎኮስን ንምምዕርራይ ዝሕግዝ ዝተሰፈረ ካርታ ተኻቲቱ ኣሎ። ካልኦት ግዝኣታት ብመርበባት ሓበሬታ ዝድገፉ እኳ እንተዘይኮኑ፡ እቶም ብሕታዊ ቅዲታት ዝጥቀሙ ግን ብቐሊሉ ዝያዳ ዝተሓላለኸ ናይ ቅጥዒ ግብረ መልሲ ክውስኹ ይኽእሉ።

ንሚክሲን ’ ውን ከይቀየርካ ክብርታት ምምዕርራይ ከምዘይንመክር$form-validation-statesform-validation-state ኣስተውዕል ።