تأیید فرم‌های Bootstrap 5

اعتبارسنجی فرم

از کلاس‌های اعتبارسنجی مختلف برای ارائه بازخورد ارزشمند به کاربران استفاده کنید. لطفاً این بود که -validated یا .needs-validation به عناصر <form> اضافه کنید، بسته به اینکه آیا می‌خواهید قبل از ارسال فرم یا بعد از آن بازخورد اعتبارسنجی ارائه دهید. فیلدهای ورودی دارای لبه‌های سبز (مستند) یا قرمز (غیرمستند) خواهند بود، تا محتوای کم‌اشاره شده در فرم را نشان دهد. شما همچنین می‌توانید .valid-feedback یا .invalid-feedback پیام، برای اطلاع دادن به کاربر که چه چیزی کم است یا قبل از ارسال فرم باید چه کاری انجام دهد.

مثال

در این مثال، ما از آن قبل از ارسال فرم استفاده می‌کنیم این بود که -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>

آزمایش کنید