إزاي تربط النماذج (Forms) والتحقق من البيانات (Validation) في لارافيل و Inertia.js؟

أكيد مريت باللحظة دي: بتعمل Form في الفرونت إند، وبتبعتها للباك إند، وبعدين تقعد تتخانق مع الـ API عشان تعرض رسائل الخطأ للمستخدم بشكل شيك وسريع. الموضوع ده ساعات بيبقى "صداع" حقيقي وبيخلي الكود بتاعك مليان Fetch و Axios و Loaders وحوارات طويلة. بس إيه رأيك لو قلتلك إنك ممكن تربط الـ Laravel بالـ Frontend وكأنهم تطبيق واحد بدون ما تشغل بالك بـ API ومشاكله؟ أهلاً بيك في عالم Inertia.js.

ليه الـ Validation في Inertia.js غير أي حاجة تانية؟

لما بنستخدم Inertia.js، إحنا بنلغي الفاصل اللي بين الباك إند والفرونت إند. الميزة الكبيرة هنا إن لارافيل بتبعت أخطاء الـ Validation (التحقق من صحة البيانات) للـ Frontend بشكل تلقائي عبر الـ Props. يعني مش محتاج تعمل "إدارة حالة" (State Management) معقدة عشان تظهر رسائل الخطأ، Inertia بتعمل ده بالنيابة عنك.

الخطوة الأولى: إعداد الـ Form في الـ Frontend

بدل ما تستخدم Axios العادي، Inertia موفرة لينا Helper ممتاز اسمه useForm. ده بيسهل عليك التعامل مع الـ Data، وحالة الـ Processing، والأهم من ده كله، التعامل مع الأخطاء (Errors).

import { useForm } from '@inertiajs/react';

const { data, setData, post, processing, errors } = useForm({
  name: '',
  email: '',
});

const submit = (e) => {
  e.preventDefault();
  post('/users');
};

الخطوة التانية: التعامل مع الـ Validation في Laravel

في الـ Controller بتاعك، الأمور بتمشي زي ما إنت متعود تماماً. لارافيل لما بتلاقي إن الـ Validation فشل في طلب جاي من Inertia، هترجع المستخدم تلقائياً للصفحة اللي كان فيها، ومعاها الـ Errors في الـ Session.

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
    ]);

    User::create($validated);

    return redirect('/dashboard');
}

الخطوة التالتة: عرض الأخطاء (Displaying Errors)

دلوقتي جه وقت السحر. في الفرونت إند، المتغير اللي اسمه errors اللي خدناه من الـ useForm، هيكون فيه كل رسائل الخطأ اللي لارافيل رجعتها. تقدر تعرضها ببساطة جنب كل حقل (Input).

<input 
  type="text" 
  value={data.name} 
  onChange={e => setData('name', e.target.value)} 
/>
{errors.name && <div style={{color: 'red'}}>{errors.name}</div>}

نصائح احترافية لتجربة مستخدم (User Experience) أفضل

1. استخدم التحقق الفوري: حاول تستخدم التحقق اللي في الفرونت إند (Client-side validation) كطبقة أولى، والـ Laravel validation كطبقة أساسية ومهمة للأمان.

2. شكل الرسائل: حاول دايماً تخلي رسائل الخطأ واضحة ومباشرة للمستخدم، بدل ما تظهر رسائل تقنية زي "The field is required"، خليها "الاسم مطلوب يا بطل".

3. الحالة (State): استغل الـ processing property اللي موجودة في useForm عشان تقفل زرار الـ Submit لحد ما الطلب يخلص، ده بيمنع الـ Double submissions.

خاتمة: نصيحة من أخ لمبرمج

يا صاحبي، البرمجة مش بس إنك تكتب كود شغال، البرمجة هي إنك تكتب كود "سهل الصيانة" (Maintainable). التعامل مع الـ Forms في Inertia هيوفر عليك ساعات طويلة من الشغل المتكرر. اتعلم إزاي الـ Data بتنتقل، وافهم الـ Lifecycle بتاعة الطلب من أول ما المستخدم يدوس Submit لحد ما الـ Validation يرجع. كل ما فهمت "العمق" بتاع الأدوات دي، كل ما بقيت مبرمج محترف، مش مجرد حد بيستخدم الـ Framework وخلاص.

ذاكر الـ Documentation الخاصة بـ Inertia كويس، وجرب بنفسك، ولو وقفت قدامك حاجة، افتكر إن المجتمع العربي للبرمجة موجود عشان يساعدك.