شرح صفوف ومحتوى الفقرة
يُعد إظهار رسائل الخطأ الحمراء في وجه المستخدم قبل أن يلمس الحقل — أو وهو لا يزال في منتصف كتابة بريده الإلكتروني — تجربة مزعجة للغاية. يطبق مهندسو الواجهات المحترفون قاعدة «تأجيل التنبيه، والتبرئة الفورية».
تتبع حالة لمس الحقول في كائن touched عند انطلاق حدث مغادرة الحقل onBlur (أو عند محاولة الإرسال)، فلا تعرض رسالة الخطأ إلا للحقل الذي غادره المستخدم فعلاً، وأخفِها لحظياً فور تصحيحه للإدخال.
HTML
const [email, setEmail] = useState('');
const [touched, setTouched] = useState(false);
const isInvalid = !email.includes('@');
const showError = touched && isInvalid;