Blazor Server - التعامل مع النماذج (Forms) والتحقق من المدخلات (Validation)

Blazor Server - التعامل مع النماذج (Forms) والتحقق من المدخلات (Validation)

النماذج (Forms) في Blazor Server تُمثل طريقة قوية لجمع البيانات من المستخدمين، مع دعم مدمج للتحقق من المدخلات (Validation) بشكل تلقائي وديناميكي.

🔹 المكونات الأساسية للتعامل مع النماذج:

• <EditForm>: هو العنصر الرئيسي لإنشاء نموذج.
• <InputText>, <InputNumber>, <InputDate>: عناصر إدخال تدعم التحقق التلقائي وربط البيانات.
• <ValidationMessage>: لعرض رسائل الخطأ لكل حقل معين.
• <ValidationSummary>: لعرض جميع أخطاء النموذج مجمعة.
• <DataAnnotationsValidator>: مسؤول عن تفعيل التحقق بناءً على Data Annotations.

---

🔹 مثال عملي متكامل على نموذج مع تحقق:

// ملف RegisterForm.razor

@page "/register"

<EditForm Model="@user" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>الاسم:</label>
        <InputText @bind-Value="user.Name" class="form-control" />
        <ValidationMessage For="() => user.Name" />
    </div>

    <div>
        <label>البريد الإلكتروني:</label>
        <InputText @bind-Value="user.Email" class="form-control" />
        <ValidationMessage For="() => user.Email" />
    </div>

    <div>
        <label>العمر:</label>
        <InputNumber @bind-Value="user.Age" class="form-control" />
        <ValidationMessage For="() => user.Age" />
    </div>

    <br />
    <button type="submit" class="btn btn-primary">تسجيل</button>
</EditForm>

@code {
    private User user = new();

    private void HandleValidSubmit()
    {
        Console.WriteLine("✅ تم إرسال البيانات بنجاح!");
    }

    private void HandleInvalidSubmit()
    {
        Console.WriteLine("❌ توجد أخطاء في البيانات.");
    }

    public class User
    {
        [Required(ErrorMessage = "الاسم مطلوب.")]
        [StringLength(100, ErrorMessage = "يجب ألا يتجاوز الاسم 100 حرف.")]
        public string Name { get; set; }

        [Required(ErrorMessage = "البريد الإلكتروني مطلوب.")]
        [EmailAddress(ErrorMessage = "صيغة البريد الإلكتروني غير صحيحة.")]
        public string Email { get; set; }

        [Range(18, 99, ErrorMessage = "العمر يجب أن يكون بين 18 و99.")]
        public int Age { get; set; }
    }
}

---

🔹 شرح مفصل للكود السابق:

• EditForm يستخدم خاصيتي Model لربط البيانات وOnValidSubmit وOnInvalidSubmit للتعامل مع النجاح أو الفشل في الإرسال.
• DataAnnotationsValidator يسمح للنموذج باستخدام التحقق من خلال السمات (Attributes) الموجودة على الكلاس User.
• ValidationSummary يعرض جميع الأخطاء أعلى النموذج دفعة واحدة.
• InputText / InputNumber مكونات ذكية تتعامل مع التحقق والربط تلقائيًا.
• ValidationMessage يعرض رسائل الخطأ بجانب كل حقل محدد.

---

🔹 ملاحظات إضافية:

• يجب أن تكون الخصائص في الكلاس المرتبط بـ public حتى تعمل مع EditForm.
• يمكن تخصيص التنسيقات للرسائل عبر CSS لإظهار الأخطاء بطريقة مرئية جذابة.
• بإمكانك استخدام قواعد تحقق مخصصة Custom Validation لو أردت مرونة أكثر.

✅ بفضل هذه الآلية، يمكنك بناء نماذج تفاعلية آمنة وسهلة الاستخدام داخل Blazor.