الفرق بين Client و Server Validation في الويب

الفرق بين Client-Side Validation و Server-Side Validation وليه لازم تستخدم الاتنين؟
كتير مننا وهو بيبني أي Website أو Web App بيوصل لمرحلة الـ Validation (التحقق من صحة البيانات)، وساعتها السؤال اللي بيتكرر:

"أعمل التحقق في الـ Frontend ولا في الـ Backend؟"
والإجابة ببساطة:
الاتنين… ومينفعش تعتمد على واحد بس

بس قبل ما نقول ليه، تعال نفهم يعني إيه كل واحد فيهم، وبيروح فين وبيعمل إيه، وليه مهمين أصلاً.

---

يعني إيه Client-Side Validation؟ ​

ده الـ Validation اللي بيحصل من ناحية المستخدم - يعني في المتصفح نفسه (Browser) قبل ما البيانات تتبعت للسيرفر.

مثال بسيط:​

أنت بتكتب إيميل في فورم تسجيل، فجأة يطلعلك:
"Invalid Email Format"
ده حصل من غير ما البيانات تتبعت للسيرفر.
ده لأن الـ Browser أو الـ JavaScript اتأكد إن صيغة الإيميل مش صحيحة.

مميزات Client-Side Validation ​

الميزة	التوضيح
سريع جدًا	مفيش إرسال واستلام بيانات مع السيرفر
بيحسن تجربة المستخدم	اليوزر يشوف الخطأ فورًا ويصلحه
بيقلل الضغط على السيرفر	السيرفر مش لازم يستقبل كل الأخطاء

لكن… هل هو كافي؟ ​

لأ طبعًا.
لأن ببساطة أي حد فاهم شوية في أدوات زي:

• DevTools / Inspect Element
• Postman
• Curl
• أو حتى يعطل JavaScript في المتصفح

يقدر يتخطى Client-Side Validation بالكامل.

يعني، الـ Client-Side Validation مش حماية
هو بس تجربة استخدام كويسة.

---

طب يعني إيه Server-Side Validation؟ ​

ده بقى اللي بيحصل في السيرفر نفسه بعد ما البيانات تتبعت.

البيانات توصل للسيرفر، والسيرفر يبدأ يتحقق منها:

• هل القيمة دي تعتبر Email صح؟
• هل الـ Password قوي ومطابق للشروط؟
• هل الـ Email ده موجود فعلاً في الـ Database؟
• هل الـ User ليه صلاحيات يدخل؟

وهنا مفيش هزار…
لو البيانات غلط → السيرفر يرفضها فورًا.

مميزات Server-Side Validation ​

الميزة	التوضيح
آمن جدًا	حتى لو اليوزر حاول يتلاعب في الداتا، السيرفر يمنعه
بيحافظ على سلامة الـ Database	يمنع إدخال البيانات الغلط
بيمنع هجمات زي SQL Injection و XSS	أمان أعلى

باختصار:​

Client-Side → تجربة استخدام
Server-Side → أمان وحماية

---

ليه لازم تستخدم الاتنين مع بعض؟ ​

لو اعتمدت على Client بس → الداتا ممكن تتحايل وتتغير
لو اعتمدت على Server بس → اليوزر هيتعصب من كتر الرسائل المتأخرة

فـ الحل الصح:
Client-Side Validation = يخلي اليوزر يعرف غلطه بسرعة
Server-Side Validation = يمنع أي محاولة خداع أو هجوم

---

مثال واقعي :​

صفحة تسجيل دخول تحتوي على:​

• خانة Email
• خانة Password

الـ Requirements:​

العنصر	الشروط المطلوبة
Email	يكون بصيغة صحيحة + لا يكون فاضي + يكون موجود في الـ Database
Password	لا يكون فاضي + لا يقل عن 8 حروف + يحتوي Capital + Small + أرقام + رموز + يساوي الـ Password المخزنة

أولاً: Client-Side Validation باستخدام JavaScript ​

<form id="loginForm">
  <input type="email" id="email" placeholder="Enter Email" />
  <input type="password" id="password" placeholder="Enter Password" />
  <button type="submit">Login</button>
  <p id="errorMsg" style="color:red;"></p>
</form>

<script>
document.getElementById("loginForm").addEventListener("submit", function(e){
    let email = document.getElementById("email").value;
    let password = document.getElementById("password").value;

    if(!email.includes("@") || !email.includes(".")){
        e.preventDefault();
        document.getElementById("errorMsg").innerText = "⚠️ من فضلك اكتب إيميل صحيح";
        return;
    }

    if(password.length < 8){
        e.preventDefault();
        document.getElementById("errorMsg").innerText = "⚠️ الباسورد لازم يكون 8 حروف على الأقل";
        return;
    }
});
</script>

ده يحسن تجربة المستخدم…​

لكن اليوزر الذكي ممكن يعديه

---

ثانيًا: Server-Side Validation (مثال C# / ASP.NET Core) ​

[HttpPost]
public IActionResult Login(LoginModel model)
{
    if (!ModelState.IsValid)
        return BadRequest("⚠️ البيانات المرسلة غير صالحة");

    if (!model.Email.Contains("@"))
        return BadRequest("⚠️ إيميل غير صالح");

    var user = _db.Users.FirstOrDefault(u => u.Email == model.Email);
    if (user == null)
        return NotFound("⚠️ الإيميل غير موجود");

    if (!VerifyPassword(model.Password, user.PasswordHash))
        return Unauthorized("⚠️ الباسورد غلط");

    return Ok("✅ تسجيل الدخول تم بنجاح");
}

هنا مهما كان المستخدم بيحاول يتلاعب:
السيرفر مش هيسمح بمرور بيانات غلط.

---

خلاصة الموضوع ​

النوع	الغرض الأساسي	ينفع يتخطى؟	لازم نستخدمه؟
Client-Side	تحسين تجربة المستخدم	نعم بسهولة	نعم
Server-Side	حماية وأمان البيانات	صعب جدًا	نعم

فـ ماتخليش مشروعك "سداح مداح"
استخدم الاتنين دايمًا سوا.