يحتاج Pocket إلى طريقة لإضافة المصاريف غير زر “عيّنة”: نموذج (form) فيه تسمية ومبلغ وفئة. تبدو النماذج بسيطة، لكنها المكان الذي يعيش فيه كثير من الأخطاء الحقيقية، لأنها تقف على الحدّ الفاصل بين البشر، الذين يكتبون أي شيء، وكودك، الذي يتوقّع بيانات نظيفة.
\nابدأ بـ HTML سليم. لكل حقل <label>، والزر زر إرسال داخل <form>:
<form id=\"expense-form\" novalidate>\n <label for=\"label\">What</label>\n <input id=\"label\" name=\"label\" required>\n\n <label for=\"amount\">Amount ($)</label>\n <input id=\"amount\" name=\"amount\" type=\"number\" step=\"0.01\" min=\"0.01\" required>\n\n <label for=\"category\">Category</label>\n <select id=\"category\" name=\"category\">\n <option value=\"food\">Food</option>\n <option value=\"travel\">Travel</option>\n <option value=\"fun\">Fun</option>\n </select>\n\n <p id=\"form-error\" class=\"error\" role=\"alert\"></p>\n <button type=\"submit\">Add expense</button>\n</form>يمكن إرسال النموذج بالنقر على الزر، أو بالضغط على Enter داخل حقل، أو عبر التقنيات المساعدة. وكل ذلك يُطلق حدثًا واحدًا على النموذج: submit. استمع إليه، لا إلى click على الزر:
const form = document.querySelector(\"#expense-form\");\n\nform.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n // read, validate, add, render\n});ردّ الفعل الافتراضي للمتصفّح على الإرسال هو أن يبعث البيانات إلى خادم ويحمّل صفحة جديدة. ومع تطبيق يعمل داخل الصفحة، تمسح إعادة التحميل هذه كل شيء. وevent.preventDefault() تلغي السلوك الافتراضي وتُبقيك في الصفحة.
يمكنك قراءة value لكل حقل، أو جمعها كلها مرة واحدة باستخدام FormData، التي تعتمد على سمة name لكل حقل:
const data = new FormData(form);\nconst rawLabel = data.get(\"label\"); // \" Coffee with Sam \"\nconst rawAmount = data.get(\"amount\"); // \"4.50\": a string!\nconst category = data.get(\"category\"); // \"food\"كل قيمة نص، حتى لو جاءت من حقل أرقام. هذه مشكلة “المدخلات المكتوبة” من القسم 1، لكنها الآن حقيقية. نظّف القيم فورًا: شذّب التسمية بـ trim()، وحوّل المبلغ مرة واحدة، إلى سنتات:
const label = rawLabel.trim();\nconst amount = Math.round(Number(rawAmount) * 100);ضع القواعد في دالة واحدة تأخذ القيم وتُرجع ما فيها من خطأ. إنها لا تمسّ الصفحة، لذلك يسهل قراءتها ويسهل اختبارها:
\nfunction validateExpense({ label, amount }) {\n const errors = {};\n if (label.trim() === \"\") {\n errors.label = \"Enter what you spent money on.\";\n }\n if (!Number.isFinite(amount) || amount <= 0) {\n errors.amount = \"Enter an amount greater than zero.\";\n }\n return errors;\n}\n\nconsole.log(validateExpense({ label: \" \", amount: Number(\"\") }));\nconsole.log(validateExpense({ label: \"Coffee\", amount: 4.5 }));الكائن الفارغ يعني “صالح”، وتفحص ذلك بـ Object.keys(errors).length === 0. لاحظ أن Number("") تساوي 0، وهو فخّ المدخلات الفارغة من القسم 1، لذلك تفشل حالة “لم يُكتب شيء” في قاعدة amount <= 0 كما ينبغي، وNumber.isFinite ترفض NaN وInfinity في فحص واحد.
form.addEventListener(\"submit\", (event) => {\n event.preventDefault();\n const data = new FormData(form);\n const values = {\n label: data.get(\"label\").trim(),\n amount: Math.round(Number(data.get(\"amount\")) * 100),\n category: data.get(\"category\"),\n };\n\n const errors = validateExpense(values);\n const errorEl = document.querySelector(\"#form-error\");\n if (Object.keys(errors).length > 0) {\n errorEl.textContent = Object.values(errors).join(\" \");\n const firstBad = form.elements[Object.keys(errors)[0]];\n firstBad.setAttribute(\"aria-invalid\", \"true\");\n firstBad.focus();\n return;\n }\n\n errorEl.textContent = \"\";\n expenses = [...expenses, { id: nextId(), ...values }];\n renderExpenses();\n form.reset();\n form.elements.label.focus();\n});عند الفشل، تذهب الرسالة إلى عنصر يحمل role="alert"، تعلن عنه قارئات الشاشة بمجرّد أن يتغيّر نصّه؛ ويُعلَّم أول حقل غير صالح بـ aria-invalid وينتقل إليه التركيز، فيستطيع المستخدم إصلاحه فورًا. وعند النجاح، تتغيّر البيانات، ويُعاد عرض القائمة، وتُفرغ form.reset() الحقول، ويعود التركيز إلى الحقل الأول، جاهزًا للمصروف التالي. والتطبيق الحقيقي سيُزيل أيضًا aria-invalid بمجرّد إصلاح الحقل. أما form.elements.label فتبحث عن حقل باسمه name.
عرض الخطأ نصف المهمة؛ والنصف الآخر إزالته في اللحظة المناسبة. فإن بقيت الرسالة على الشاشة والمستخدم يكتب الإصلاح بالفعل، شعر أن النموذج يوبّخه. استمع إلى أحداث input على النموذج (فهي تنتشر للأعلى، لذلك يغطّي مستمع واحد كل الحقول) وامسح حالة الخطأ في الحقل الذي تغيّر:
form.addEventListener(\"input\", (event) => {\n event.target.removeAttribute(\"aria-invalid\");\n document.querySelector(\"#form-error\").textContent = \"\";\n});وقاوِم الرغبة المعاكسة، أي التحقّق مع كل ضغطة مفتاح وعرض “Enter an amount” بينما الشخص في منتصف كتابته. والخيار الافتراضي الجيد: تحقّق عند الإرسال، وامسح عند الإدخال.
\nالسمات required وtype="number" وmin وstep تتيح للمتصفّح فحص القواعد الأساسية وعرض رسائله الخاصة. والسمة novalidate على النموذج أعلاه توقف تلك الرسائل كي تُعرض رسائلك أنت بشكل متّسق، بينما تظل السمات توثّق النية وتعطي الهواتف لوحة المفاتيح المناسبة. ويمكنك أيضًا أن تسأل المتصفّح مباشرة عبر form.checkValidity().
صار نموذجك يضيف مصاريف حقيقية. لكن أعِد تحميل الصفحة وستختفي، لأنها لم تعش قط إلا في متغيّر. الدرس التالي يُصلح ذلك باستخدام JSON وlocalStorage.
submit على النموذج، لا إلى click على الزر، كي تمرّ كل طرق الإرسال (الزر، ومفتاح Enter، والتقنيات المساعدة) عبر كودك، واستدعِ event.preventDefault() لتمنع إعادة تحميل الصفحة.","كل قيمة تُقرأ من نموذج هي نص؛ شذّب النصوص وحوّل الأرقام قبل استخدامها.","أبقِ التحقّق من المدخلات في دالة نقية تأخذ القيم وتُرجع الأخطاء، كي تكون القواعد سهلة القراءة والاختبار.","سمات HTML مثل required وmin طبقة أولى مفيدة، لكن يجب أن يتحقّق كود JavaScript أيضًا، وأن يتحقّق الخادم كذلك.","اعرض الأخطاء بجوار الحقل، وعلّمه بـ aria-invalid، وانقل التركيز إليه كي ينتبه مستخدمو لوحة المفاتيح وقارئات الشاشة."],"further":[{"title":"Client-side form validation (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation"},{"title":"FormData (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/FormData"},{"title":"HTMLFormElement: submit event (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event"}],"quiz":[{"q":"تُلحق منطق “إضافة مصروف” بحدث click على زر الحفظ. ما الذي يتعطّل؟
form.requestSubmit()، أو ببعض التقنيات المساعدة، أو بالضغط على Enter في نموذج ليس فيه زر إرسال، ومعالج النقر لا يلغي الإرسال الأصلي. أما الاستماع إلى submit على النموذج فيلتقط كل الطرق، وpreventDefault() هناك تمنع إعادة التحميل."},{"text":"لا شيء؛ click وsubmit قابلان للتبادل.","why":"إنهما حدثان مختلفان. submit يقع على النموذج أيًّا كانت طريقة إرساله؛ أما النقر على الزر فليس إلا إحدى الطرق التي قد يبدأ بها الإرسال."},{"text":"لا يعود بالإمكان التركيز على الزر بلوحة المفاتيح.","why":"إضافة مستمع لا تغيّر سلوك التركيز. المشكلة في مسار الإرسال الذي لا تتعامل معه."}],"answer":0},{"q":"حقل أرقام يحتوي على 12.50. ما قيمة input.value؟
12.5.","why":"حتى مع type="number"، تكون value نصًا دائمًا. استخدم Number(input.value) أو input.valueAsNumber."},{"text":"النص "12.50".","why":"صحيح. قيم النماذج نصوص، لذلك حوّلها قبل أي عملية حسابية، وإلا فستلصق + النصوص."},{"text":"NaN، إلى أن يُرسل النموذج.","why":"القيمة متاحة في أي وقت، وهي النص الموجود في الحقل، لا NaN."}],"answer":1},{"q":"في نموذجك سمتا required وmin="0.01" على حقل المبلغ. لماذا تتحقّق مجددًا في JavaScript؟
اجعل نموذج Pocket يضيف المصاريف بأمان.
\nvalidateExpense({ label, amount }). تُرجع كائنًا فيه رسالة label حين تكون التسمية فارغة أو مسافات فقط، ورسالة amount حين لا يكون المبلغ رقمًا منتهيًا (finite) أكبر من 0. والقيم الصالحة تعطي {}.#form-error، واضبط aria-invalid="true" على أول حقل غير صالح، ولا تُضف شيئًا.#form-error، وأفرغ النموذج.event.preventDefault();.","data.get("amount") نص. وMath.round(Number(data.get("amount")) * 100) تعطي السنتات؛ وNumber("") تساوي 0، وقاعدة المبلغ لديك ترفضها.","بعد التحقّق: const names = Object.keys(errors);. إن كان names.length > 0، فاعرض الرسائل، واستخدم form.elements[names[0]].setAttribute("aria-invalid", "true") ثم return. وإلا فأضف، واعرض، ثم form.reset()."],"explanation":"تلغي preventDefault() الإرسال الخاص بالمتصفّح فتبقى الصفحة في مكانها. ويحوّل معالج الحدث القيم عند الحدود: تُشذَّب التسمية ويصبح المبلغ سنتات صحيحة فورًا، فيعمل كل ما بعد ذلك السطر مع بيانات نظيفة. وvalidateExpense دالة نقية: قيم تدخل، ورسائل خطأ تخرج، ولا شيء في الصفحة يُمسّ، ولهذا يستطيع الفحص الأول استدعاءها مباشرة. ومعالج الحدث يقرّر فقط ما يُعرض. والإرجاع المبكر عند الأخطاء يُبقي مسار النجاح مسطّحًا ومقروءًا، وform.reset() مع مسح الرسالة يجهّزان النموذج للمصروف التالي. ومسح aria-invalid في بداية كل إرسال يعني أن الحقل الذي أُصلح لم يعد يُعلَن عنه على أنه غير صالح.
validateExpense تُرجع الرسائل الصحيحة، و{} للقيم الصالحة","empty-blocked":"النموذج الفارغ يعرض خطأ، ويعلّم حقل التسمية بأنه غير صالح، ولا يضيف شيئًا","prevents-default":"معالج الإرسال يستدعي preventDefault()","adds-valid":"يُضاف الإدخال الصالح بتسمية مشذّبة والمبلغ بالسنتات","resets":"بعد الإضافة الناجحة، يُفرغ النموذج وتُمسح رسالة الخطأ"}},"words":588,"readMinutes":3}