Bootstrap 5 التحقق من صحة النموذج

تحقق من النموذج

يمكنك استخدام فئات التحقق المختلفة لتقديم ملاحظات قيمة للمستخدم. يرجى تضمين .was-validated أو .needs-validation إضافة إلى عناصر <form>، اعتمادًا على ما إذا كنت تريد تقديم ملاحظات التحقق قبل تقديم النموذج أم بعد ذلك. سيكون لديك حواف زرقاء (صالحة) أو حمراء (غير صالحة) على حقل الإدخال، لتوضيح ما يفتقر إليه النموذج. يمكنك أيضًا إضافة .valid-feedback أو .invalid-feedback رسالة، لتوضيح ما يفتقر إليه المستخدم، أو ما يجب القيام به قبل تقديم النموذج.

مثال

في هذا المثال، نستخدم قبل تقديم النموذج .was-validated لإشارة إلى ما ينقصها:

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">اسم المستخدم:</label>
    <input type="text" class="form-control" id="uname" placeholder="الرجاء إدخال اسم المستخدم" name="uname" required>
    <div class="valid-feedback">مقبول.</div>
    <div class="invalid-feedback">يرجى ملء هذا الحقل.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">كلمة المرور:</label>
    <input type="password" class="form-control" id="pwd" placeholder="الرجاء إدخال كلمة المرور" name="pswd" required>
    <div class="valid-feedback">مقبول.</div>
    <div class="invalid-feedback">يرجى ملء هذا الحقل.</div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
    <label class="form-check-label" for="myCheck">أوافق على هذه الشروط.</label>
    <div class="valid-feedback">مقبول.</div>
    <div class="invalid-feedback">اختر هذا المربع للإكمال.</div>
  </div>
  <button type="submit" class="btn btn-primary">تقديم</button>
</form>

جرب بنفسك