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>

ลองทดลองด้วยตัวเอง