تعلّم التحقق من النماذج باستخدام JavaScript عبر مشروع عملي للمبتدئين

مقدمة إلى التحقق من النماذج باستخدام JavaScript

يُعد Form Validation من أهم المهارات الأساسية في تطوير واجهات الويب، لأنه يضمن إدخال بيانات صحيحة قبل إرسالها، ويحسن تجربة المستخدم، ويقلل من الأخطاء داخل التطبيقات. في هذا الدليل العملي، سنبني نموذج تسجيل بسيط باستخدام HTML وCSS وJavaScript، مع إضافة الأيقونات والصور وتهيئة التصميم ليكون Responsive على مختلف الأجهزة.

الهدف من هذا المشروع ليس فقط التحقق من الحقول الفارغة، بل أيضاً فهم كيفية تنظيم المشروع بشكل عملي يصلح لعرضه ضمن معرض أعمالك التقني.

إعداد المشروع بشكل صحيح

قبل البدء في كتابة الأكواد، أنشئ بيئة عمل بسيطة ومنظمة. ستحتاج إلى مجلد مشروع يحتوي على الملفات الأساسية التالية:

• index.html
• style.css
• main.js

بعد ذلك، اربط الملفات داخل صفحة HTML، ثم نزّل الصور المطلوبة للمشروع إن أردت تطبيق التصميم كما هو. كذلك ستحتاج إلى مكتبة Font Awesome لإظهار الأيقونات داخل الحقول.

أضف رابط Font Awesome داخل وسم الرأس في ملف HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" crossorigin="anonymous" />

خطة العمل داخل المشروع

سنقسم تنفيذ المشروع إلى مراحل واضحة حتى يسهل فهم كل جزء على حدة:

• كتابة بنية HTML
• تنسيق الواجهة باستخدام CSS
• بناء منطق التحقق عبر JavaScript
• إضافة أزرار التسجيل عبر الشبكات الاجتماعية
• إضافة الصور والعناصر البصرية
• استخدام Media Queries لجعل التصميم متجاوباً

كتابة هيكل HTML للنموذج

إنشاء الحاوية الرئيسية والنموذج

ابدأ بإنشاء عنصر يحمل الفئة .container، وداخله نموذج يحمل المعرّف form:

<div class="container">
  <form id="form"></form>
</div>

ثم أضف أربعة عناصر div داخل النموذج، أحدها للعنوان وثلاثة للحقول:

<form id="form">
  <div class="title">Get Started</div>
  <div></div>
  <div></div>
  <div></div>
</form>

إضافة حقول الإدخال الأساسية

سننشئ ثلاثة حقول رئيسية: Username وEmail وPassword. كما سنضيف منطقة مخصصة لرسائل الخطأ عبر الفئة .error، ليتم تحديثها لاحقاً باستخدام JavaScript.

حقل اسم المستخدم:

<!-- User Name input -->
<div>
  <label for="username">User Name</label>
  <i class="fas fa-user"></i>
  <input type="text" name="username" id="username" placeholder="Joy Shaheb" />
  <i class="fas fa-exclamation-circle failure-icon"></i>
  <i class="far fa-check-circle success-icon"></i>
  <div class="error"></div>
</div>

حقل البريد الإلكتروني:

<!-- Email input -->
<div>
  <label for="email">Email</label>
  <i class="far fa-envelope"></i>
  <input type="email" name="email" id="email" placeholder="abc@gmail.com" />
  <i class="fas fa-exclamation-circle failure-icon"></i>
  <i class="far fa-check-circle success-icon"></i>
  <div class="error"></div>
</div>

حقل كلمة المرور:

<!-- Password input -->
<div>
  <label for="password">Password</label>
  <i class="fas fa-lock"></i>
  <input type="password" name="password" id="password" placeholder="Password here" />
  <i class="fas fa-exclamation-circle failure-icon"></i>
  <i class="far fa-check-circle success-icon"></i>
  <div class="error"></div>
</div>

إضافة زر الإرسال

في نهاية النموذج، أضف زر الإرسال بالشكل التالي:

<form>
  <!-- other codes are here -->
  <button id="btn" type="submit">Submit</button>
</form>

تنسيق النموذج باستخدام CSS

إعادة ضبط الأنماط الافتراضية

من الجيد دائماً البدء بإزالة الهوامش والإعدادات الافتراضية التي تفرضها المتصفحات:

/**
 * ! changing default styles of brower
 **/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

تنسيق النموذج والعنوان

بعد ذلك، نسّق النموذج نفسه ليظهر بشكل عمودي مع ظل خفيف ومساحة داخلية مناسبة:

/**
 * ! style rules for form section
 **/
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}

.title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

تنسيق الحقول والعناصر المحيطة بها

أضف تنسيقاً بسيطاً إلى label والحقول النصية:

label {
  display: block;
  margin-bottom: 5px;
}

form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

form div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}

تنسيق الأيقونات ورسائل الخطأ

لجعل الأيقونات تظهر داخل الحقول بشكل صحيح، استخدم التموضع المطلق:

/**
 * ! style rules for form icons
 **/
form div i {
  position: absolute;
  padding: 10px;
}

ثم أضف ألوان النجاح والخطأ ورسائل التنبيه:

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

وبما أن أيقونتي النجاح والفشل تتداخلان في البداية، أخفهما مؤقتاً إلى أن يتحكم بهما JavaScript:

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

تنسيق زر الإرسال

/* Style rules for submit btn */
button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

button:hover {
  opacity: 0.8;
}

إضافة منطق التحقق باستخدام JavaScript

تحديد العناصر المستهدفة

أول خطوة هي الوصول إلى عناصر الصفحة بسهولة. لإنجاز ذلك بصورة أنظف، يمكن إنشاء دالتين مساعدتين:

let id = (id) => document.getElementById(id);
let classes = (classes) => document.getElementsByClassName(classes);

بعدها خزّن عناصر النموذج داخل متغيرات:

let username = id("username"),
    email = id("email"),
    password = id("password"),
    form = id("form"),
    errorMsg = classes("error"),
    successIcon = classes("success-icon"),
    failureIcon = classes("failure-icon");

منع الإرسال الافتراضي للنموذج

حتى نختبر التحقق أولاً قبل إرسال البيانات، أضف مستمع الحدث التالي:

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

إنشاء دالة التحقق الأساسية

سننشئ دالة باسم engine تستقبل ثلاثة معاملات:

• id: الحقل الذي نريد التحقق منه
• serial: رقم العنصر المطابق داخل مصفوفات الرسائل والأيقونات
• message: رسالة الخطأ التي ستظهر عند وجود مشكلة

let engine = (id, serial, message) => {}

التحقق الأساسي سيكون كالتالي:

let engine = (id, serial, message) => {
  if (id.value.trim() === "") {
  } else {
  }
}

تُستخدم الدالة trim() لإزالة الفراغات الزائدة من بداية النص ونهايته، حتى لا يمرر المستخدم قيمة تبدو ممتلئة وهي في الحقيقة فارغة.

إظهار رسائل الخطأ وحالات النجاح

الآن أضف منطق الرسائل وتغيير الحدود والأيقونات:

let engine = (id, serial, message) => {
  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";

    // icons
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  } else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";

    // icons
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}

تفعيل التحقق عند الضغط على زر الإرسال

بعد إنشاء الدالة، استدعها داخل حدث submit لكل حقل:

form.addEventListener("submit", (e) => {
  e.preventDefault();

  engine(username, 0, "Username cannot be blank");
  engine(email, 1, "Email cannot be blank");
  engine(password, 2, "Password cannot be blank");
});

بهذا الشكل، سيتحقق النموذج من كل حقل على حدة، ويعرض رسالة مناسبة عند ترك أي مدخل فارغ.

إضافة أزرار التسجيل عبر الشبكات الاجتماعية

لجعل واجهة النموذج أكثر احترافية، يمكن إضافة خيارات تسجيل بديلة عبر Google وFacebook.

أضف البنية التالية داخل النموذج:

<form id="form">
  <div class="social">
    <div class="title">Get Started</div>
    <div class="question">
      Already Have an Account? <br />
      <span>Sign In</span>
    </div>
    <div class="btn"></div>
    <div class="or">Or</div>
  </div>
  <!-- other codes are here-->
</form>

ثم أضف زري الشبكات الاجتماعية داخل العنصر .btn:

<div class="btn">
  <div class="btn-1">
    <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
    Sign Up
  </div>
  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
    Sign Up
  </div>
</div>

نسّق هذه الأزرار كالتالي:

/**
 * ! style rules for social section
 **/
.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-2 {
  background-color: #4f70b5;
  color: white;
}

.or {
  text-align: center;
}

.question {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}

إضافة الصور والعناصر البصرية

الواجهة الجذابة تساعد على تحسين الانطباع الأول وتجعل المشروع أقرب إلى التطبيقات الحقيقية. أضف القسم البصري التالي بجوار النموذج:

<div class="container">
  <div class="content">
    <div class="logo">
      <img src="https://svgshare.com/i/_go.svg" alt="" />
    </div>
    <div class="image"></div>
    <div class="text">
      Start for free & get <br /> attractive offers today!
    </div>
  </div>

  <form id="form">
    <!--other codes are here -->
  </form>
</div>

ثم غيّر اتجاه العناصر داخل الحاوية ليصبح أفقياً:

.container {
  display: flex;
  flex-direction: row;
}

/**
 * ! style rules for content section
 **/
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

form {
  width: 45%;
  max-width: none;
}

أضف الرسم التوضيحي الرئيسي عبر CSS:

.image {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}

.text {
  text-align: center;
  color: white;
  font-size: 18px;
}

form {
  width: 45%;
  max-width: none;
}

جعل التصميم متجاوباً عبر Media Queries

أي واجهة حديثة يجب أن تعمل جيداً على الهواتف والأجهزة اللوحية، لذلك سنضيف Media Queries لضبط التخطيط حسب عرض الشاشة.

للشاشات التي تقل عن 900px

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  form,
  .content {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }

  .image {
    height: 70vh;
  }
}

للشاشات التي تقل عن 425px

@media (max-width: 425px) {
  form {
    padding: 20px;
  }
}

لماذا هذا المشروع مهم للمبتدئين؟

هذا المشروع يعلّمك أكثر من مجرد التحقق من القيم الفارغة. فهو يساعدك على فهم عدد من المفاهيم العملية المهمة، مثل:

• التعامل مع عناصر DOM في JavaScript
• إنشاء دوال قابلة لإعادة الاستخدام
• ربط الواجهة البصرية بسلوك تفاعلي واضح
• تحسين تجربة المستخدم من خلال الرسائل الفورية
• تصميم واجهة تسجيل حديثة ومتجاوبة

وإذا رغبت في تطوير المشروع لاحقاً، يمكنك توسيعه عبر إضافة تحقق من صحة البريد الإلكتروني بصيغة Regex، أو قياس قوة كلمة المرور، أو ربط النموذج بواجهة خلفية Backend.

الخلاصة التقنية

يمثل هذا المشروع نقطة انطلاق ممتازة لفهم JavaScript Form Validation بصورة عملية. من الناحية التقنية، أفضل ما فيه هو الجمع بين بساطة الهيكل وإمكانية تطويره لاحقاً إلى نظام تحقق أكثر تقدماً. إذا أتقنت هذا النموذج، فسيصبح من السهل عليك بناء نماذج تسجيل وتواصل واشتراك أكثر احترافية داخل مشاريع الويب الحديثة.