اعتبارسنجی فرم (Form Validation)

اعتبارسنجی فرم یعنی چک کردن ورودی ها قبل از ارسال. در بوت استرپ، با کلاس ها پیام و رنگ می گیری. کلاس .was-validated بعد از ارسال نشان می دهد. کلاس .needs-validation برای کنترل دستی است. مثل معلم که برگه را سریع چک می کند.

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

برای نمایش بازخورد، کلاس .was-validated را روی فرم بگذار. سپس برای هر فیلد، required و پیام های .valid-feedback و .invalid-feedback را اضافه کن.

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</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">I agree on blabla.</label>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Check this checkbox to continue.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

مشاهده در ادیتور

چطور کار می کند؟

• required فیلد اجباری را مشخص می کند.
• فیلدهای درست سبز می شوند؛ نادرست قرمز می شوند.
• پیام ها با .valid-feedback یا .invalid-feedback نمایش می آیند.

گام های عملی اعتبارسنجی

1. کلاس .was-validated را به فرم بده.
2. روی فیلدها required قرار بده.
3. دو پیام بازخورد برای هر فیلد بگذار.
4. فرم را ارسال کن و نتیجه را ببین.

نکته: متن راهنما کوتاه و دقیق باشد. پیام خطا قابل فهم باشد.

جمع بندی سریع

• .was-validated بعد از ارسال فعال می شود.
• required اساس اعتبارسنجی ساده است.
• رنگ ها وضعیت را واضح نشان می دهند.
• پیام های بازخورد، خطا را توضیح می دهند.

مطالب مرتبط: برچسب های شناور (Floating Labels)، اعتبارسنجی فرم با گرید، چک باکس و رادیو.