الدرس 6 من 8

قراءة النموذج دفعة واحدة

هدف الدرس

قراءة كل الحقول بسطر واحد

01

الشرح

إذا قرأت النموذج حقلًا حقلًا طال الكود مع كل حقل جديد، وقد تنسى الحقل الذي أُضيف أمس. أمّا new FormData(form) فيقرأ الحقول كلها دفعة واحدة، ثم يحوّلها Object.fromEntries إلى كائن عادي جاهز لـ JSON.stringify وللإرسال.

لكن FormData لا يرى إلا الحقول التي لها name، والحقل الذي ليس له اسم يضيع بصمت، فلا يظهر خطأ ولا تحذير، وإنما ينقص مفتاح من الطلب. وتصل كل القيم نصوصًا، فالكمية تصل "2" وليس 2، و"2" + 1 تعطي "21".

ويكفي مستمع input واحد على النموذج لكل حقوله، لأن الحدث يصعد إليه من أيّ حقل فيه.

02

المطلوب

اكتب الدالة readForm(form) لتُرجع كائنًا فيه كل الحقول وتكون الكمية فيه رقمًا، وأصلح الحقل الذي يضيع، ثم اعرض JSON.stringify(readForm(form)) في #out مع كل تعديل.

الفحوص

5 فحوص
  1. الدالة readForm تقرأ القيم الحالية
  2. البريد موجود في الناتج
  3. الكمية رقم وليست نصًّا
  4. الحقل الجديد يُقرأ دون تعديل الكود
  5. الناتج المعروض يتحدّث مع كل تعديل
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

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

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعة ونصف.

index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 5 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

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

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعة ونصف.