مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

توثیق

اپنے صارفین کو HTML5 فارم کی توثیق کے ساتھ، براؤزر کے پہلے سے طے شدہ طرز عمل یا حسب ضرورت طرز اور JavaScript کے ذریعے قابل قدر، قابل عمل تاثرات فراہم کریں۔

اس صفحہ پر
ہم اس بات سے آگاہ ہیں کہ فی الحال کلائنٹ سائیڈ اپنی مرضی کے مطابق توثیق کے انداز اور ٹول ٹپس قابل رسائی نہیں ہیں، کیونکہ وہ معاون ٹیکنالوجیز کے سامنے نہیں آتے۔ جب ہم کسی حل پر کام کرتے ہیں، تو ہم تجویز کریں گے کہ یا تو سرور سائیڈ آپشن یا ڈیفالٹ براؤزر کی توثیق کا طریقہ استعمال کریں۔

یہ کیسے کام کرتا ہے

یہاں یہ ہے کہ بوٹسٹریپ کے ساتھ فارم کی توثیق کیسے کام کرتی ہے:

  • HTML فارم کی توثیق کا اطلاق CSS کی دو سیڈو کلاسز، :invalidاور :valid. یہ , اور عناصر پر لاگو <input>ہوتا <select>ہے <textarea>۔
  • بوٹسٹریپ اسکوپ :invalidاور :validاسٹائل کو پیرنٹ .was-validatedکلاس میں دیتا ہے، جو عام طور پر پر لاگو ہوتا ہے <form>۔ بصورت دیگر، کوئی بھی مطلوبہ فیلڈ بغیر کسی قدر کے صفحہ لوڈ پر غلط ظاہر ہوتا ہے۔ اس طرح، آپ انتخاب کر سکتے ہیں کہ انہیں کب چالو کرنا ہے (عام طور پر فارم جمع کرانے کی کوشش کے بعد)۔
  • فارم کی ظاہری شکل کو دوبارہ ترتیب دینے کے لیے (مثال کے طور پر، AJAX کا استعمال کرتے ہوئے متحرک فارم جمع کرانے کی صورت میں)، جمع کرانے کے بعد دوبارہ .was-validatedسے کلاس کو ہٹا دیں۔<form>
  • فال بیک کے طور پر، .is-invalidاور سرور سائڈ کی توثیق.is-valid کے لیے سیوڈو کلاسز کے بجائے کلاسز کا استعمال کیا جا سکتا ہے ۔ انہیں والدین کی کلاس کی ضرورت نہیں ہے ۔.was-validated
  • CSS کے کام کرنے کے طریقے میں رکاوٹوں کی وجہ سے، ہم (فی الحال) <label>اپنی مرضی کے مطابق JavaScript کی مدد کے بغیر DOM میں فارم کنٹرول سے پہلے آنے والے اسٹائلز کو لاگو نہیں کر سکتے۔
  • تمام جدید براؤزرز Constraint validation API کی حمایت کرتے ہیں ، فارم کنٹرولز کی توثیق کرنے کے لیے JavaScript طریقوں کی ایک سیریز۔
  • تاثرات کے پیغامات براؤزر ڈیفالٹس (ہر براؤزر کے لیے مختلف، اور CSS کے ذریعے غیر اسٹائلبل) یا اضافی HTML اور CSS کے ساتھ ہماری حسب ضرورت فیڈ بیک اسٹائلز کا استعمال کر سکتے ہیں۔
  • setCustomValidityآپ JavaScript میں اپنی مرضی کے مطابق درست پیغامات فراہم کر سکتے ہیں ۔

اس بات کو ذہن میں رکھتے ہوئے، ہمارے حسب ضرورت فارم کی توثیق کے انداز، اختیاری سرور سائیڈ کلاسز، اور براؤزر ڈیفالٹس کے لیے درج ذیل ڈیمو پر غور کریں۔

اپنی مرضی کے انداز

حسب ضرورت بوٹسٹریپ فارم کی توثیق کے پیغامات کے لیے، آپ novalidateکو اپنے میں بولین وصف شامل کرنے کی ضرورت ہوگی <form>۔ یہ براؤزر کے ڈیفالٹ فیڈ بیک ٹول ٹپس کو غیر فعال کر دیتا ہے، لیکن پھر بھی JavaScript میں فارم کی توثیق APIs تک رسائی فراہم کرتا ہے۔ ذیل میں فارم جمع کرانے کی کوشش کریں؛ ہمارا JavaScript جمع کرانے کے بٹن کو روکے گا اور آپ کو تاثرات فراہم کرے گا۔ جمع کرانے کی کوشش کرتے وقت، آپ اپنے فارم کنٹرولز پر لاگو کردہ :invalidاور طرزیں دیکھیں گے۔:valid

حسب ضرورت فیڈ بیک اسٹائلز حسب ضرورت رنگ، بارڈرز، فوکس اسٹائلز، اور بیک گراؤنڈ آئیکنز کو تاثرات کو بہتر طریقے سے پہنچانے کے لیے لاگو کرتے ہیں۔ s کے لیے پس منظر کی شبیہیں <select>صرف کے ساتھ دستیاب ہیں .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.
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)
  })
})()

براؤزر ڈیفالٹس

اپنی مرضی کے مطابق توثیق کے تاثرات کے پیغامات یا فارم کے طرز عمل کو تبدیل کرنے کے لیے جاوا اسکرپٹ لکھنے میں دلچسپی نہیں ہے؟ سب اچھا ہے، آپ براؤزر ڈیفالٹس استعمال کر سکتے ہیں۔ ذیل میں فارم جمع کرانے کی کوشش کریں۔ آپ کے براؤزر اور OS پر منحصر ہے، آپ کو تاثرات کا تھوڑا سا مختلف انداز نظر آئے گا۔

اگرچہ ان فیڈ بیک اسٹائلز کو CSS کے ساتھ اسٹائل نہیں کیا جا سکتا، پھر بھی آپ 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>

سرور سائیڈ

ہم کلائنٹ سائیڈ کی توثیق کا استعمال کرنے کی تجویز کرتے ہیں، لیکن اگر آپ کو سرور سائیڈ کی توثیق کی ضرورت ہو تو، آپ اور کے ساتھ غلط اور درست فارم فیلڈز کی نشاندہی کر سکتے .is-invalidہیں .is-valid۔ نوٹ کریں کہ .invalid-feedbackان کلاسوں کے ساتھ بھی تعاون کیا جاتا ہے۔

غلط فیلڈز کے لیے، اس بات کو یقینی بنائیں کہ غلط فیڈ بیک/غلطی کا پیغام متعلقہ فارم فیلڈ کے ساتھ منسلک ہے aria-describedby(نوٹ کرتے ہوئے کہ یہ وصف ایک سے زیادہ idحوالہ دینے کی اجازت دیتا ہے، اگر فیلڈ پہلے سے ہی اضافی فارم ٹیکسٹ کی طرف اشارہ کرتا ہے)۔

سرحدی رداس کے ساتھ مسائل حل کرنے کے لیے ، ان پٹ گروپس کو ایک اضافی .has-validationکلاس درکار ہوتی ہے۔

اچھا لگ رہا ہے!
اچھا لگ رہا ہے!
@
براہ کرم ایک صارف نام منتخب کریں۔
براہ کرم ایک درست شہر فراہم کریں۔
براہ کرم ایک درست ریاست منتخب کریں۔
براہ کرم ایک درست زپ فراہم کریں۔
جمع کرانے سے پہلے آپ کو متفق ہونا ضروری ہے۔
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>

معاون عناصر

درج ذیل فارم کنٹرولز اور اجزاء کے لیے توثیق کی طرزیں دستیاب ہیں:

  • <input>s اور <textarea>s کے ساتھ .form-control( .form-controlان پٹ گروپس میں ایک تک)
  • <select>s کے ساتھ.form-select
  • .form-checks
براہ کرم ٹیکسٹیریا میں ایک پیغام درج کریں۔
غلط فیڈ بیک ٹیکسٹ کی مثال
مزید مثال غلط تاثرات کا متن
مثال کے طور پر غلط فیڈ بیک منتخب کریں۔
غلط فارم فائل فیڈ بیک کی مثال
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>

ٹول ٹپس

اگر آپ کا فارم لے آؤٹ اس کی اجازت دیتا ہے، تو آپ ایک اسٹائل شدہ ٹول ٹپ میں توثیق کے تاثرات ظاہر کرنے .{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.
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>

سس

متغیرات

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

مکسنس

ہمارے فارم کی توثیق کے تاثرات کی طرزیں تیار کرنے کے لیے، ہمارے لوپ کے ذریعے، دو مکسنز کو ایک ساتھ ملایا جاتا ہے۔

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

نقشہ

یہ توثیق کا نقشہ ہے Sass سے _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توثیق کی حالتیں کیسے تیار کرتے ہیں۔ ہر ریاست کے رنگ، آئیکن، ٹول ٹپ کا رنگ، اور فوکس شیڈو کو حسب ضرورت بنانے کے لیے ایک نیسٹڈ نقشہ شامل ہے۔ اگرچہ کوئی دوسری ریاستیں براؤزرز کے ذریعے سپورٹ نہیں کرتی ہیں، لیکن وہ لوگ جو حسب ضرورت اسٹائلز استعمال کرتے ہیں وہ آسانی سے زیادہ پیچیدہ فارم فیڈ بیک شامل کر سکتے ہیں۔