การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Form Validation

การทำ Form Validation (การตรวจสอบความถูกต้องของแบบฟอร์ม) เป็นสิ่งสำคัญในการสร้างเว็บแอปพลิเคชันที่มีความปลอดภัยและเชื่อถือได้ การใช้ Bootstrap 5 ในการตรวจสอบความถูกต้องของฟอร์มช่วยให้เราสามารถปรับแต่งและออกแบบฟอร์มได้ง่ายขึ้น และมีฟังก์ชันการตรวจสอบที่ใช้งานง่ายพร้อมทั้งสนับสนุนความเข้ากันได้กับ HTML5 form validation API

ขั้นตอนการใช้งาน Form Validation ด้วย Bootstrap 5

ใน Bootstrap 5 การตรวจสอบความถูกต้องของฟอร์มสามารถทำได้โดยการเพิ่ม class .was-validated ลงใน <form> เมื่อผู้ใช้กรอกข้อมูลลงในฟอร์มแล้วคลิกปุ่ม submit โดย Bootstrap จะทำการเพิ่มข้อความเตือนและเปลี่ยนสีของขอบฟอร์มเพื่อแสดงข้อผิดพลาด

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation with Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h2>Form Validation Example</h2>
    <form class="row g-3 needs-validation" novalidate>
      <div class="col-md-4">
        <label for="validationCustom01" class="form-label">First name</label>
        <input type="text" class="form-control" id="validationCustom01" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please enter your first name.</div>
      </div>
      <div class="col-md-4">
        <label for="validationCustom02" class="form-label">Last name</label>
        <input type="text" class="form-control" id="validationCustom02" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please enter your last name.</div>
      </div>
      <div class="col-md-4">
        <label for="validationCustomUsername" class="form-label">Username</label>
        <div class="input-group has-validation">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
          <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
          <div class="invalid-feedback">Please choose a username.</div>
        </div>
      </div>
      <div class="col-md-6">
        <label for="validationCustom03" class="form-label">City</label>
        <input type="text" class="form-control" id="validationCustom03" required>
        <div class="invalid-feedback">Please provide a valid city.</div>
      </div>
      <div class="col-md-3">
        <label for="validationCustom04" class="form-label">State</label>
        <select class="form-select" id="validationCustom04" required>
          <option selected disabled value="">Choose...</option>
          <option>...</option>
        </select>
        <div class="invalid-feedback">Please select a valid state.</div>
      </div>
      <div class="col-md-3">
        <label for="validationCustom05" class="form-label">Zip</label>
        <input type="text" class="form-control" id="validationCustom05" required>
        <div class="invalid-feedback">Please provide a valid zip.</div>
      </div>
      <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit form</button>
      </div>
    </form>
  </div>

  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
        .forEach(function (form) {
          form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }

            form.classList.add('was-validated')
          }, false)
        })
    })()
  </script>
</body>
</html>

อธิบายโค้ด

1. HTML Structure

  • ฟอร์มนี้สร้างด้วย Bootstrap 5 โดยมีการแบ่งเป็นแถว (row) และคอลัมน์ (col-md) เพื่อจัดการเลย์เอาต์อย่างสวยงาม
  • มีฟิลด์การกรอกข้อมูล เช่น ชื่อ (First name), นามสกุล (Last name), ชื่อผู้ใช้ (Username), เมือง (City), รัฐ (State), และรหัสไปรษณีย์ (Zip)

2. Validation Feedback

  • สำหรับฟิลด์ที่ต้องการตรวจสอบความถูกต้อง เช่น <input> หรือ <select> เราจะใส่ class is-valid หรือ is-invalid ให้โดยอัตโนมัติเมื่อผู้ใช้กรอกข้อมูลได้ถูกต้องหรือผิดพลาด
  • valid-feedback และ invalid-feedback จะเป็นข้อความที่แสดงเมื่อข้อมูลถูกต้องหรือผิดพลาด

3. JavaScript สำหรับ Form Validation

  • มีการใช้ JavaScript เพื่อป้องกันการส่งข้อมูลในฟอร์มถ้าข้อมูลยังไม่ถูกต้องโดยใช้ checkValidity() และเพิ่ม class was-validated ให้กับฟอร์มเพื่อแสดงสถานะการตรวจสอบ

รูปแบบการตรวจสอบเพิ่มเติมที่สามารถปรับใช้ได้

การตรวจสอบอีเมล

HTML
<div class="mb-3">
  <label for="emailInput" class="form-label">Email address</label>
  <input type="email" class="form-control" id="emailInput" required>
  <div class="invalid-feedback">Please enter a valid email address.</div>
</div>

การตรวจสอบรหัสผ่าน

HTML
<div class="mb-3">
  <label for="passwordInput" class="form-label">Password</label>
  <input type="password" class="form-control" id="passwordInput" required>
  <div class="invalid-feedback">Please enter your password.</div>
</div>

การตรวจสอบเบอร์โทรศัพท์

HTML
<div class="mb-3">
  <label for="phoneInput" class="form-label">Phone Number</label>
  <input type="tel" class="form-control" id="phoneInput" pattern="[0-9]{10}" required>
  <div class="invalid-feedback">Please enter a valid 10-digit phone number.</div>
</div>

สรุป

การใช้งาน Bootstrap 5 สำหรับการตรวจสอบความถูกต้องของฟอร์มสามารถทำได้ง่ายและมีความยืดหยุ่น โดยใช้คลาส was-validated ร่วมกับฟังก์ชันการตรวจสอบในตัวของ HTML5 และ Bootstrap ช่วยเพิ่มประสิทธิภาพในการแสดงผลลัพธ์ให้กับผู้ใช้

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ