1️⃣ فعال کردن اعتبارسنجی

• کلاس اصلی: needs-validation

• صفت novalidate برای غیرفعال کردن اعتبارسنجی پیش‌فرض مرورگر

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationName" class="form-label">نام</label>
    <input type="text" class="form-control" id="validationName" required>
    <div class="invalid-feedback">
      لطفاً نام خود را وارد کنید.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">ارسال</button>
</form>

• required → فیلد اجباری

• invalid-feedback → پیام خطا

2️⃣ Valid / Invalid State

• Bootstrap کلاس‌های زیر را به input اضافه می‌کند:

  • is-invalid → وقتی مقدار نامعتبر است

  • is-valid → وقتی مقدار معتبر است

<input type="email" class="form-control is-valid" placeholder="Email">
<input type="text" class="form-control is-invalid" placeholder="نام">

• می‌توان به صورت دستی هم اضافه کرد

3️⃣ Checkbox و Radio Validation

<form class="needs-validation" novalidate>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="" id="termsCheck" required>
    <label class="form-check-label" for="termsCheck">
      من شرایط را می‌پذیرم
    </label>
    <div class="invalid-feedback">
      باید این گزینه را انتخاب کنید.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">ارسال</button>
</form>

• چک‌باکس‌ها و رادیوها هم با required قابل اعتبارسنجی هستند

4️⃣ Custom Validation with JS

• برای فعال کردن اعتبارسنجی واقعی روی فرم

<script>
  // فرم‌ها با کلاس needs-validation
  const forms = document.querySelectorAll('.needs-validation');

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    });
  });
</script>

• کلاس was-validated → فعال کردن استایل‌های valid/invalid

5️⃣ Floating Labels + Validation

<form class="needs-validation" novalidate>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingName" placeholder="نام" required>
    <label for="floatingName">نام</label>
    <div class="invalid-feedback">
      لطفاً نام خود را وارد کنید.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">ارسال</button>
</form>

• کاملاً با Floating Labels سازگار است

• پیام خطا زیر input نمایش داده می‌شود

✅ نکات مهم

• کلاس needs-validation فرم را آماده اعتبارسنجی می‌کند

• required, minlength, pattern و سایر صفت‌های HTML5 قابل استفاده هستند

• پیام خطا با invalid-feedback و پیام موفق با valid-feedback نمایش داده می‌شود

• با JS می‌توان اعتبارسنجی سفارشی و استایل فعال کرد