Bootstrap—ทำ Form Validation

ในเมื่อมี Form ออนไลน์แล้ว ทำไมถึงต้องทำ Form Validation อีก นั่นก็เพราะ Form validation คือการเพิ่มการตรวจสอบข้อมูลให้กับฟอร์มนั่นเอง ช่วยให้เรามั่นใจได้ว่าข้อมูลที่กรอกมานั้นถูกคัดกรองตามรูปแบบที่ต้องการมาอย่างดีแล้วระดับหนึ่ง เช่น ช่องกรอกอีเมล เบอร์โทรศัพท์ ฯลฯ แต่ว่า Web Browser ส่วนใหญ่ในปัจจุบันได้ Built-in ความสามารถในการ Validate Form มาให้เลยในตัว ซึ่งก็อาจจะดูไม่สวยงามหรือดูแพงซักเท่าไหร่ ในเมื่อมือใหม่จะทำ Form Validation ก็ต้องทำให้มันดูแพงขึ้นมาเลยครับ วันนี้เราเลยจะมาทดลองทำ Form Validation กันครับ แต่ก่อนอื่นเพื่อนๆ คนไหนที่เข้ามาอ่านบทความนี้ครั้งแรก หากไม่ดูเป็นการรบกวน ก็จะชวนให้อ่านบทความ Bootstrap — สร้างฟอร์มจองห้องประชุมให้ดูแพงแบบด้วย BS4 ก่อนครับ เพราะเราจะเอาข้อมูลมาทำต่อกันในบทความนี้ พร้อมแล้วก็ลุยโลด…🎢


1. ทำความรู้จัก Attribute เกี่ยวกับการ Validate Input ใน HTML5

สำหรับ Built-in Form Validation จะมี Attribute ที่เรามักใช้กันบ่อยๆ และใช้ในแบบฟอร์มจองห้องประชุมของเราดังนี้

  • required – กำหนดให้ input นั้นๆ ไม่สามารถปล่อยว่างได้ ผู้ใช้จำเป็นต้องกรอกเสมอ!!!
  • pattern – เป็นการกำหนดรูปแบบของข้อมูลที่ให้กรอกด้วย Regular Expression ซึ่งมีความยืดหยุ่นสูงทำให้เรากำหนด และตรวจสอบความถูกต้องของรูปแบบของข้อมูลได้ละเอียดในระดับตำแหน่งของตัวอักษรเลยทีเดียว เช่น ตรวจสอบรูปแบบของ URL, email ฯลฯ
  • min , max – ใช้ระบุจำนวนน้อยสุด มากสุด ของตัวเลขที่ให้กรอก
  • minlength , maxlength – ใช้ระบุจำนวนน้อยสุด มากสุด ของตัวอักษรที่ให้กรอก โดยมากเรามักใช้กับการกำหนดความยาวของ username และรหัสผ่านฯลฯ
  • type ใน HTML5 จะมีให้กำหนดรูปแบบเป็น tel, number, time, date ได้เลย [อ่านเพิ่มเติมรูปแบบทั้งหมด]

2. เพิ่ม Attribute ลงใน Form

2.1 ข้อมูล Name ระบุเป็น type=”text” และ required

<input type="text" class="form-control" id="inputName" name="name" placeholder="Your name" required />

ถ้าหากผู้ใช้งานไม่กรอกช่องนี้จะได้การแจ้งเตือนแบบนี้

2.2 ข้อมูล Email ระบุเป็น type=”email” , pattern = “[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$” และ required

<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Enter email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required />

ถ้าหากผู้ใช้งานไม่กรอกช่องนี้หรือกรอกไม่ตรงตามรูปแบบ characters@characters.domain จะได้การแจ้งเตือนแบบนี้

2.3 ข้อมูล Phone ระบุเป็น type=”tel” , pattern=”\d{10}” และ required

ระบุให้ผู้ใช้งานต้องกรอกข้อมูลและข้อมูลที่กรอกต้องเป็นตัวเลขเท่านั้น และต้องมีจำนวน 10 หลัก ถ้าไม่ถูกต้องจะได้แจ้งเตือนแบบนี้

2.4 ข้อมูล Date ระบุเป็น type=”date” และ required

<input type="date" class="form-control" id="inputDate" name="date" required />

ระบุให้ผู้ใช้งานต้องกรอกข้อมูลและข้อมูลที่กรอกต้องอยู่ในรูปแบบ mm/dd/yyyy เท่านั้น ซึ่งหากกำหนด type=”date” จะมี calendar date picker ขึ้นมาให้เลือกอัตโนมัติ ถ้ากรอกข้อมูลไม่ถูกรูปแบบจะได้แจ้งเตือนแบบนี้

2.5 ข้อมูล Time ผมเลือกใช้เป็น select สร้าง dropdown list เพื่อเลือกค่าชั่วโมงและนาทีแทน และกำหนดให้เป็น required [ในส่วนนี้ถ้าหากเพื่อนๆ อยากได้ time picker ให้กำหนด type = “time” แทนครับ]

<select class="form-control mr-1" id="inputStartTimeHour" name="startHour" required>

2.6 ข้อมูล Room ก็กำหนดเป็น type=”radio” และ required

<input type="radio" class="form-check-input" id="inlineRadioType1" name="roomType" value="Room 1" required />
...

2.7 ข้อมูล Snack and Drink ต้องการให้กรอกจำนวนที่ต้องการกำหนดเป็น type=”number” , min=”0″ , max=”40″

<input type="number" class="form-control" id="inputSnack1" name="snack1" min="0" max="40" />
...

2.8 ข้อมูล Notes ต้องการให้กรอกข้อมูลความต้องการเพิ่มเติมอื่นๆ ในส่วนนี้เลยไม่ได้ตั้งรูปแบบอะไรไว้เลย


3. ใช้ class ของ Bootstrap เพื่อแสดงผล Form Validation

ง่ายๆ เลยใน <form></form> ให้เพิ่ม class=”needs-validation” และกำหนดเป็น novalidate เพื่อปิดการทำงานของ Built-in Form Validation ครับ สามารถอ่านรายละเอียดเพิ่มเติมได้ที่ Bootstrap Form Validation

<form id="myForm" action="#" method="" autocomplete="on" class="needs-validation" novalidate>
...
</form>

หลังจากนั้นทำการเพิ่ม script จากตัวอย่างของ Bootstrap ซึ่งจะเป็นการเพิ่ม .was-validated ลงใน <form></form> หากมีการตรวจสอบพบว่าข้อมูลไม่ตรงตามที่กำหนดไว้หลังจากกด Submit

สำหรับแบบฟอร์มจองห้องประชุมก็จะได้หน้าตาออกมาประมาณแบบนี้ 🤩

และถ้ากด Inspect หน้าแบบฟอร์มหลังจากกด Submit จะพบว่าที่ <form></form> จะได้แบบนี้

<form id="myForm" action="#" method="" autocomplete="on" class="needs-validation was-validated" novalidate>
...
</form>

ท้ายสุด ไม่รู้เพื่อนๆ เป็นกันหรือเปล่าครับ เวลาที่ต้องกรอกฟอร์มออนไลน์ต่างๆ ผมจะชอบกด Submit Form ก่อนโดยที่ยังไม่ต้องกรอกข้อมูลอะไรเลย เหตุผลก็เพื่อจะดู Form Validation นี่แหละว่าต้องกรอกข้อมูลอะไรบ้าง😏 สำหรับบทความนี้ก็เป็นการนำเสนอการใช้งาน Bootstrap Form Validation แบบง่ายๆ ในการแสดงผลเพื่อให้ผู้ใช้งานกรอกแบบฟอร์มของเราได้อย่างเข้าใจและถูกต้องตามที่เราต้องการแล้วครับ Happy Life…💡💡💡


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12