Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 20: การตรวจสอบฟอร์มเบื้องต้นด้วย Alpine.js

1. ความสำคัญของการตรวจสอบฟอร์ม

การตรวจสอบฟอร์ม (Form Validation) เป็นขั้นตอนสำคัญในการรับข้อมูลจากผู้ใช้งาน เพื่อให้มั่นใจว่าข้อมูลที่ได้รับมีความครบถ้วนและถูกต้อง ตัวอย่างเช่น การตรวจสอบว่า Required Fields ถูกกรอกครบถ้วนหรือไม่

Alpine.js ช่วยให้สามารถตรวจสอบฟอร์มได้อย่างง่ายดายและ Dynamic ด้วยการใช้ State และคำสั่งของ Alpine.js เช่น x-show, x-text และ x-bind

2. การตรวจสอบ Required Fields เบื้องต้น

ตัวอย่างพื้นฐาน:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div x-data="{ name: '', email: '', errors: [] }">
    <form @submit.prevent="validateForm">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" x-model="name">
            <p x-show="errors.includes('name')" style="color: red;">Name is required</p>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email">
            <p x-show="errors.includes('email')" style="color: red;">Email is required</p>
        </div>
        <button type="submit">Submit</button>
    </form>
    <p x-text="`Submitted Name: ${name}, Email: ${email}`" x-show="errors.length === 0 && name && email"></p>
</div>
 
<script>
    function validateForm() {
        this.errors = [];
        if (!this.name.trim()) {
            this.errors.push('name');
        }
        if (!this.email.trim()) {
            this.errors.push('email');
        }
    }
</script>

คำอธิบาย:

  • x-model ผูกค่าของอินพุต name และ email กับ State
  • เมื่อส่งฟอร์ม (@submit.prevent="validateForm"), ฟังก์ชัน validateForm จะตรวจสอบว่าแต่ละฟิลด์มีค่าหรือไม่
  • ข้อความแจ้งเตือนจะแสดงเมื่อมีข้อผิดพลาด (x-show="errors.includes('name')")

3. การตรวจสอบ Required Fields แบบ Dynamic

ตัวอย่าง: ตรวจสอบฟิลด์หลายฟิลด์ด้วย Loop
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div x-data="{ formData: { name: '', email: '', phone: '' }, errors: {} }">
    <form @submit.prevent="validateForm">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" x-model="formData.name">
            <p x-show="errors.name" style="color: red;" x-text="errors.name"></p>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="formData.email">
            <p x-show="errors.email" style="color: red;" x-text="errors.email"></p>
        </div>
        <div>
            <label for="phone">Phone:</label>
            <input type="text" id="phone" x-model="formData.phone">
            <p x-show="errors.phone" style="color: red;" x-text="errors.phone"></p>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>
 
<script>
    function validateForm() {
        this.errors = {};
        Object.entries(this.formData).forEach(([field, value]) => {
            if (!value.trim()) {
                this.errors[field] = `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
            }
        });
    }
</script>

คำอธิบาย:

  • ใช้ formData เพื่อจัดเก็บค่าของฟิลด์ทั้งหมด
  • ใช้ errors เป็น Object เพื่อเก็บข้อความแสดงข้อผิดพลาดของแต่ละฟิลด์
  • Loop ผ่าน formData เพื่อตรวจสอบค่าของแต่ละฟิลด์แบบ Dynamic

4. การใช้คุณสมบัติ HTML ในการตรวจสอบฟอร์ม

คุณสมบัติ HTML เช่น required สามารถใช้ร่วมกับ Alpine.js เพื่อการตรวจสอบฟอร์มที่ง่ายขึ้น

ตัวอย่าง:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div x-data="{ isSubmitted: false }">
    <form @submit.prevent="isSubmitted = true">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" required>
        </div>
        <button type="submit">Submit</button>
    </form>
    <p x-show="isSubmitted" style="color: green;">Form submitted successfully!</p>
</div>

คำอธิบาย:

  • ใช้คุณสมบัติ required ของ HTML เพื่อบังคับให้ผู้ใช้กรอกฟิลด์
  • Alpine.js ใช้ isSubmitted เพื่อตรวจสอบสถานะการส่งฟอร์ม

5. การแสดงข้อความแจ้งเตือนเมื่อส่งฟอร์มสำเร็จ

ตัวอย่าง:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div x-data="{ name: '', email: '', errors: [], isSubmitted: false }">
    <form @submit.prevent="validateForm">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" x-model="name">
            <p x-show="errors.includes('name')" style="color: red;">Name is required</p>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" x-model="email">
            <p x-show="errors.includes('email')" style="color: red;">Email is required</p>
        </div>
        <button type="submit">Submit</button>
    </form>
    <p x-show="isSubmitted" style="color: green;">Form submitted successfully!</p>
</div>
 
<script>
    function validateForm() {
        this.errors = [];
        if (!this.name.trim()) this.errors.push('name');
        if (!this.email.trim()) this.errors.push('email');
 
        if (this.errors.length === 0) {
            this.isSubmitted = true;
        } else {
            this.isSubmitted = false;
        }
    }
</script>

คำอธิบาย:

  • เมื่อไม่มีข้อผิดพลาด (errors.length === 0), แสดงข้อความ “Form submitted successfully!”

6. ข้อควรระวังในการตรวจสอบฟอร์ม

  1. การตรวจสอบฝั่งไคลเอนต์ไม่เพียงพอ:
    • ควรตรวจสอบข้อมูลซ้ำที่ฝั่งเซิร์ฟเวอร์เพื่อความปลอดภัย
  2. การจัดการ State:
    • ควรใช้ State เพื่อแยกข้อผิดพลาดและสถานะการส่งฟอร์ม
  3. ป้องกันข้อมูลไม่ครบถ้วน:
    • ใช้ข้อความแจ้งเตือนเพื่อให้ผู้ใช้ทราบฟิลด์ที่ต้องกรอก

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีการตรวจสอบฟอร์มเบื้องต้นด้วย Alpine.js เช่น การตรวจสอบ Required Fields และการใช้คุณสมบัติ required ของ HTML การจัดการข้อผิดพลาด และแสดงข้อความแจ้งเตือนเมื่อส่งฟอร์มสำเร็จ ในบทถัดไป เราจะเรียนรู้เกี่ยวกับการจัดการฟอร์มขั้นสูง เช่น การตรวจสอบรูปแบบอีเมลและหมายเลขโทรศัพท์!