رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)
اعرض الأخطاء فقط عند تفاعل المستخدم مع الحقول (touched) أو تغييرها (dirty)؛ وحسّن تجربة الاستخدام بملاحظات واضحة وفي الوقت المناسب.
رسائل الخطأ وحالات Touched/Dirty (دون مكتبات) درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نستخدم touched وdirty؟
الهدف: اعرض رسائل التحقق في الوقت المناسب باستخدام علامتَي touched، أي تمت زيارة الحقل، وdirty، أي تغيّر الحقل.
التعريفات
Touched: ركّز المستخدم على الحقل ثم غادره. Dirty: تختلف قيمة الحقل عن قيمته الأولية. استخدمهما لتحديد توقيت عرض الأخطاء.
عرض توضيحي: تجربة touched وdirty
نتتبّع touched عند مغادرة الحقل، وdirty عند تغيّر القيمة؛ وتظهر الأخطاء بعد التفاعل مع الحقل أو عند الإرسال.
<div id="root"></div>
توقيت عرض الرسائل
اعرض الأخطاء بعد أن يصبح الحقل touched، أي بعد مغادرته، أو بعد الإرسال. واستخدم dirty لإبراز الحقول التي تغيّرت.
ملاحظات أفضل للمستخدم
نصائح:
- اجعل الرسائل موجزة ومحددة.
- لا تمنع الكتابة؛ أجرِ التحقق بلطف.
- استخدم اللون والقرب المكاني لتوضيح الرسائل.
المزالق
تجنب ما يلي:
- عرض جميع الأخطاء عند أول تصيير.
- إخفاء الأخطاء بعد الإرسال.
- خلط حقول الإدخال غير المُتحكَّم بها مع حالة التحقق.
التحقق من تعريف touched
مراجعة
مراجعة: استخدم touched لتحديد توقيت عرض الأخطاء بعد التفاعل، وdirty للإشارة إلى الحقول التي تغيّرت؛ واجعل الرسائل موجزة ومفيدة.
الأسئلة الشائعة
هل درس «رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)» مجاني؟
نعم — نص درس «رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)»؟
اعرض الأخطاء فقط عند تفاعل المستخدم مع الحقول (touched) أو تغييرها (dirty)؛ وحسّن تجربة الاستخدام بملاحظات واضحة وفي الوقت المناسب. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نماذج متحكم بها مع حقول إدخال متعددة
- أنماط التحقق الأساسية ومعالجة الإرسال
- رسائل الخطأ وحالات Touched/Dirty (دون مكتبات)