การยืนยันข้อมูล (Validation) ใน Livewire ช่วยให้ผู้พัฒนาตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้กรอกได้แบบ Real-Time และยังสามารถแสดงข้อผิดพลาดได้ทันทีเมื่อข้อมูลไม่ผ่านเกณฑ์ที่กำหนดไว้ Livewire ทำให้การตรวจสอบข้อมูลฟอร์มสะดวกและรวดเร็วโดยไม่ต้องเขียน JavaScript เพิ่มเติม การตรวจสอบนี้สามารถกำหนดได้ทั้งใน Component หรือกำหนดการตรวจสอบแบบเฉพาะเจาะจงในฟังก์ชันการทำงานต่าง ๆ

ตัวอย่างการใช้งาน Validation ใน Component

สร้าง Component สำหรับฟอร์มที่ต้องการ Validation สมมุติเราจะสร้างฟอร์ม ContactForm สำหรับให้ผู้ใช้กรอกชื่อ (name) และอีเมล (email) ใช้คำสั่งนี้เพื่อสร้าง Component:

php artisan make:livewire ContactForm

กำหนดกฎการตรวจสอบใน Component (ContactForm.php) เปิดไฟล์ ContactForm.php และสร้างตัวแปร $name และ $email สำหรับเก็บข้อมูลที่ผู้ใช้กรอก จากนั้นกำหนดกฎการตรวจสอบข้อมูลใน $rules และสร้างฟังก์ชัน submitForm สำหรับการส่งข้อมูล:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email'
    ];

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName); // ตรวจสอบเฉพาะฟิลด์ที่ถูกแก้ไข
    }

    public function submitForm()
    {
        $this->validate(); // ตรวจสอบความถูกต้องของข้อมูลทั้งหมด

        // ประมวลผลข้อมูล เช่น บันทึกลงฐานข้อมูล
        session()->flash('message', 'Form submitted successfully!');

        // รีเซ็ตค่าในฟอร์มหลังการส่ง
        $this->reset(['name', 'email']);
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

• protected $rules ใช้สำหรับกำหนดกฎการตรวจสอบข้อมูล
• validateOnly ใช้สำหรับตรวจสอบข้อมูลแบบ Real-Time เมื่อมีการแก้ไขฟิลด์
• validate ใช้ตรวจสอบข้อมูลทั้งหมดในฟอร์มก่อนส่งข้อมูล

สร้างฟอร์มใน Blade View (contact-form.blade.php) ในไฟล์ contact-form.blade.php ให้เขียน HTML สำหรับฟอร์ม และใช้ wire:model เพื่อเชื่อมข้อมูลฟอร์มกับตัวแปรใน Component และใช้ wire:submit.prevent เพื่อป้องกันการรีเฟรชหน้าหลังการส่งฟอร์ม:

<div>
    @if (session()->has('message'))
        <p>{{ session('message') }}</p>
    @endif

    <form wire:submit.prevent="submitForm">
        <label for="name">Name:</label>
        <input type="text" id="name" wire:model="name">
        @error('name') <span class="error">{{ $message }}</span> @enderror

        <label for="email">Email:</label>
        <input type="email" id="email" wire:model="email">
        @error('email') <span class="error">{{ $message }}</span> @enderror

        <button type="submit">Submit</button>
    </form>
</div>

• @error('name') และ @error('email') ใช้สำหรับแสดงข้อความผิดพลาดหากข้อมูลไม่ผ่านการตรวจสอบ
• wire:submit.prevent="submitForm" ช่วยป้องกันการรีเฟรชหน้าและเรียกฟังก์ชัน submitForm แทน

การแสดง Component ใน Blade Template เพื่อแสดงฟอร์มนี้ในหน้า Blade Template เช่น home.blade.php ให้เพิ่มโค้ดดังนี้:

@livewire('contact-form')

ผลลัพธ์ที่ได้ เมื่อผู้ใช้กรอกข้อมูลในฟอร์ม ระบบจะตรวจสอบความถูกต้องแบบ Real-Time หากข้อมูลไม่ตรงตามเงื่อนไข (เช่น ชื่อไม่ถึง 3 ตัวอักษร หรืออีเมลไม่ถูกต้อง) จะมีข้อความแสดงข้อผิดพลาดทันที เมื่อข้อมูลครบถ้วนและถูกต้อง ระบบจะแสดงข้อความยืนยันว่า “Form submitted successfully!” และรีเซ็ตค่าในฟอร์ม

การนำไปใช้งาน

การตรวจสอบข้อมูลใน Livewire ช่วยให้ฟอร์มของคุณมีความปลอดภัยและสะดวกมากขึ้น สามารถนำไปใช้ได้ในหลายกรณี เช่น:

• ฟอร์มลงทะเบียนผู้ใช้
• ฟอร์มการติดต่อ (Contact Form)
• ฟอร์มกรอกข้อมูลอื่น ๆ ที่ต้องการการตรวจสอบแบบ Real-Time

การใช้ Validation ใน Livewire ช่วยลดโค้ด JavaScript ที่ซับซ้อน และทำให้การพัฒนาเป็นไปอย่างรวดเร็วและง่ายดาย