نموذج يلتقط الأخطاء · البرمجة مع مارتن

زائر يترك لك رسالة، والنموذج يشير بلطف عندما ينقص شيء.

شاهد معي: نموذج في HTML

النموذج مجموعة حقول يكتب فيها الزائر:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

<form> يلف النموذج كله. <input> حقل سطر واحد، <textarea> متعدد الأسطر.
<label> تسمية الحقل – بفضل for وid، ينتميان معاً (النقر على label يقفز للحقل).
placeholder نص تلميح رمادي.
زر بـ type="submit" يرسل النموذج.

وقليل CSS ليبدو جميلاً:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column يحوّل flexbox من أفقي إلى عمودي: الأطفال يتراصون واحداً تحت الآخر.

شاهد معي: التحقق في JavaScript

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

جديد:

submit – حدث “النموذج يُرسل.” نستمع له على النموذج، ليس على الزر.
event.preventDefault() – “لا تفعل ما تفعله عادة.” بدونه، الصفحة تُعاد تحميلها ولا يصلح سكربتنا.
.value – ما كُتب في الحقل. .trim() يزيل المسافات (حتى ” ” يُعدّ فارغاً!).
return – اخرج من function فوراً (لا فائدة من فحوصات إضافية).

💡

إلى أين تذهب الرسالة؟ لا مكان بعد – ليس لدينا خادم لاستقبالها. نتحقق فقط ونشكر. لكن تذكّر هذا الموضع: في المستوى 3، سنبني خادماً حقيقياً مع سجل زوار ونوصل هذا النموذج. حينها الرسائل تُحفظ فعلاً!

دورك الآن 💪

أضف نموذجاً إلى موقعك يناسب مشروعك، مع فحص المدخلات:

🏫 رسالة للمدرسة – اسم + رسالة (مثل المثال).
🙋 اكتب لي – اسم + رسالة، يمكنك إضافة حقل “لعبتك المفضلة”.
🌍 اقتراح رحلة – اسم + “إلى أين يجب أن نذهب بعد ولماذا.”
⚽ تسجيل تدريب – اسم + عمر (<input type="number">) + تحقق أن العمر مملوء و6 على الأقل: if (age.value < 6) { ... }.

⚠️

عادة أمنية للمحترفين: لا تثق أبداً بما يكتبه المستخدم. تحقق دائماً – حقل فارغ، عمر لا معنى له، نص طويل جداً. اليوم تفعله للب courtesy؛ في التطبيقات الحقيقية، أول خط دفاع ضد المهاجمين.

✅

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

ما ستخرج به من هذا الدرس

النموذج: <form>، <input>، <textarea>، <label>، وحدث submit مع preventDefault().
.value.trim() = ما كتبه المستخدم، بدون المسافات المحيطة.
مدخلات المستخدم يجب دائماً فحصها – أساس البرمجة الآمنة.