Bootstrap Validation States: সফলতা, সতর্কতা এবং ত্রুটি স্টাইল

Bootstrap-এ ফর্ম ভ্যালিডেশনের জন্য তিনটি স্টেট বা অবস্থা উপলব্ধ: সফলতা (success), সতর্কতা (warning) এবং ত্রুটি (error)। প্যারেন্ট এলিমেন্টে .has-success, .has-warning বা .has-error ক্লাস যোগ করলেই এই স্টাইলগুলো প্রয়োগ হয়।

উদাহরণ

নিচের উদাহরণে ফোকাসড, ডিজেবল্ড এবং ভ্যালিডেশন স্টেটগুলো দেখানো হয়েছে:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">ফোকাসড</label>
        <div class="col-sm-10">
          <input class="form-control" id="focusedInput" type="text" value="এটি ফোকাসড...">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">ডিজেবল্ড</label>
        <div class="col-sm-10">
          <input class="form-control" id="disabledInput" type="text" placeholder="ডিজেবল্ড ইনপুট..." disabled>
        </div>
      </div>
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput" class="col-sm-2 control-label">ফিল্ডসেট ডিজেবল্ড</label>
          <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" placeholder="ডিজেবল্ড ইনপুট">
          </div>
        </div>
        <div class="form-group">
          <label for="disabledSelect" class="col-sm-2 control-label">ডিজেবল্ড সিলেক্ট</label>
          <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
              <option>ডিজেবল্ড সিলেক্ট</option>
            </select>
          </div>
        </div>
      </fieldset>
      <div class="form-group has-success">
        <label class="col-sm-2 control-label" for="inputSuccess">সফল ইনপুট</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputSuccess">
        </div>
      </div>
      <div class="form-group has-warning">
        <label class="col-sm-2 control-label" for="inputWarning">সতর্কতা ইনপুট</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputWarning">
        </div>
      </div>
      <div class="form-group has-error">
        <label class="col-sm-2 control-label" for="inputError">ত্রুটি ইনপুট</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputError">
        </div>
      </div>
    </form>
  </body>
</html>

নোট: Bootstrap 5-এ এই ক্লাসগুলো পরিবর্তন হয়েছে, এখন is-valid এবং is-invalid ক্লাস ব্যবহার করা হয়।