| الأداة | الوظيفة |
|---|---|
| event.preventDefault() | منع إعادة تحميل الصفحة عند الإرسال |
| input.value | قراءة قيمة حقل الإدخال |
| required, pattern, minlength | تحقق HTML5 مدمج |
| FormData | تجميع كل قيم النموذج في كائن واحد |
النماذج (Forms) هي الوسيلة الأساسية لجمع بيانات من المستخدم في صفحات الويب، وتحتاج غالباً للتحقق من صحة المدخلات قبل معالجتها أو إرسالها. الحدث الأهم المرتبط بالنماذج هو submit، والذي يُطلق عند الضغط على زر الإرسال أو الضغط على Enter داخل حقل نص، ومن الضروري استدعاء event.preventDefault() داخله لمنع السلوك الافتراضي للمتصفح بإعادة تحميل الصفحة بالكامل، والتحكم في الإرسال عبر جافاسكريبت بدلاً من ذلك.
للوصول لقيمة أي حقل إدخال، تستخدم خاصية value على عنصر input المُحدد. للتحقق من صحة المدخلات (Validation)، يمكنك كتابة شروط يدوية في جافاسكريبت (مثل التأكد أن الحقل غير فارغ، أو أن البريد الإلكتروني يحتوي على @، أو أن كلمة المرور بطول معين)، أو الاستفادة من خصائص HTML5 المدمجة للتحقق مثل required وpattern وminlength وtype="email"، والتي يتحقق منها المتصفح تلقائياً قبل حتى وصول الحدث لجافاسكريبت.
يمكن الجمع بين الأسلوبين للحصول على أفضل تجربة: تحقق HTML5 الأساسي كخط دفاع أول سريع، وتحقق جافاسكريبت مخصص لعرض رسائل خطأ أوضح وأكثر تخصيصاً، وربما التحقق من شروط منطقية معقدة لا تستطيع خصائص HTML وحدها التعبير عنها (مثل التأكد أن كلمتي مرور متطابقتان).
لعرض رسائل الخطأ للمستخدم بشكل احترافي، الممارسة الجيدة هي إضافة أو إزالة فئة CSS (مثل "error") على الحقل المعني وعرض نص توضيحي بجانبه، بدلاً من استخدام alert() المزعجة التي توقف تفاعل المستخدم بالكامل. كائن FormData أيضاً أداة مفيدة جداً لتجميع كل قيم حقول النموذج دفعة واحدة في كائن واحد سهل الإرسال، بدل قراءة كل حقل يدوياً.
| 1 | const نموذج = document.querySelector("#loginForm"); |
| 2 | |
| 3 | نموذج.addEventListener("submit", (حدث) => { |
| 4 | حدث.preventDefault(); // منع إعادة التحميل |
| 5 | |
| 6 | const بريد = نموذج.querySelector("#email").value; |
| 7 | if (!بريد.includes("@")) { |
| 8 | alert("بريد إلكتروني غير صالح"); |
| 9 | return; |
| 10 | } |
| 11 | console.log("النموذج صالح، جاري الإرسال..."); |
| 12 | }); |
مثال 1: تحقق مخصص من صحة النموذج مع رسائل خطأ
| 1 | // تحقق شامل مع رسائل خطأ مخصصة بدون alert |
| 2 | const نموذج = document.querySelector("#signupForm"); |
| 3 | const رسالة_خطأ = document.querySelector("#errorMsg"); |
| 4 | |
| 5 | نموذج.addEventListener("submit", (حدث) => { |
| 6 | حدث.preventDefault(); |
| 7 | const كلمة_المرور = نموذج.querySelector("#password").value; |
| 8 | const تأكيد = نموذج.querySelector("#confirmPassword").value; |
| 9 | |
| 10 | if (كلمة_المرور.length < 8) { |
| 11 | رسالة_خطأ.textContent = "كلمة المرور يجب ألا تقل عن 8 أحرف"; |
| 12 | return; |
| 13 | } |
| 14 | if (كلمة_المرور !== تأكيد) { |
| 15 | رسالة_خطأ.textContent = "كلمتا المرور غير متطابقتين"; |
| 16 | return; |
| 17 | } |
| 18 | رسالة_خطأ.textContent = ""; |
| 19 | console.log("تم التحقق بنجاح!"); |
| 20 | }); |
مثال 2: استخدام FormData لجمع بيانات النموذج
| 1 | // استخدام FormData لتجميع كل القيم دفعة واحدة |
| 2 | const نموذج = document.querySelector("#profileForm"); |
| 3 | |
| 4 | نموذج.addEventListener("submit", (حدث) => { |
| 5 | حدث.preventDefault(); |
| 6 | const بيانات = new FormData(نموذج); |
| 7 | |
| 8 | for (const [الحقل, القيمة] of بيانات.entries()) { |
| 9 | console.log(`${الحقل}: ${القيمة}`); |
| 10 | } |
| 11 | }); |