التحقّق الديناميكي من الصحة (Dynamic Validations)

الدرس 10 من 21 · دورة TanStack Form الكاملة · 3 دقيقة و33 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: validation-4

[00:01] إضافةٍ إلى onChange وonBlur وonChangeAsync وonBlurAsync وonSubmit وما إلى ذلك، يمكننا أن نمتلك خيارًا واحدًا أيضًا هنا، وهو onDynamic. فإنّ onDynamic يتيح لنا أن نغيّر متى سيعمل التحقّق من الصحة (validation) بالضبط، غير أنّه

[00:17] ديناميكيًّا. فلن نضطر إلى جعله دائمًا عبر onChange أو دائمًا عبر onBlur، إذ يمكننا أن نجعله ديناميكيًّا بحسب حالة النموذج (form). فلنقل مثلًا إنّنا نحتاج إلى أن نُجري تحقّقاتنا عبر onSubmit في البداية، قبل أن نُرسل النموذج في

[00:32] المرة الأولى. غير أنّه، إذا أرسلنا النموذج للمرة الأولى، فسنحتاج الآن إلى أن نُجري تحقّقاتنا عبر onBlur مثلًا أو عبر onChange أو أيّ شيء. لذا نحتاج إلى أن تكون دالتنا هنا ديناميكيًّا بنحوٍ ما. وللقيام بذلك فلدينا onDynamic كذلك أيضًا

[00:47] وبالطبع أيضًا onDynamicAsync. ولإبقاء الأمور بسيطة، فلنحذف ربما الدالة غير المتزامنة تلك، ولنُبقي أيضًا تحقّقًا واحدًا وهو التحقّق الذي يفحص هنا الطول. غير أنّه فلنغيّره من onChange إلى

[01:03] onDynamic هكذا. غير أنّه، ولكي يعمل onDynamic، يلزمنا أن نعود إلى الخُطّاف (hook) useForm الموجود لَدَينا هنا، وأن نمرّر خيارًا هو validationLogic. وفي هنا يلزمنا استيراد دالةٍ اسمها revalidateLogic.

[01:20] وهي التي يمكننا استيرادها من @tanstack/react-form هكذا. ومن ثمّ نستدعي revalidateLogic هكذا فقط. وما سيحدث الآن هو أنّه افتراضيًّا، عندما نستخدم دالة revalidateLogic هذه، فإنّها ستجعل onDynamic يتصرف

[01:38] هكذا. فسيُجرى تحقّقنا عبر onSubmit في البداية، ثم بعد أن نُرسل النموذج أول مرة سيُجرى تحقّقنا عبر onChange. فلنجري ربما تجديدًا (refresh). ونكتب هنا شيئًا يتضمّن خطأً. ولن نتلقّى تحقّقات

[01:53] لأنّ تحقّقاتنا ستُجرى عبر onSubmit. فلنُرسل.

[01:58] والآن، بعد أن أرسلنا، نحصل على خطأنا.

[02:01] لكن بعد أن أرسلنا نموذجنا لأول مرة، فسيحدث تحقّقنا الآن عبر onChange. فبينما نكتب الآن سنحصل على تحقّقنا.

[02:10] يمكننا تخصيص هذا السلوك بإضافة بعض الخيارات إلى دالة revalidateLogic هذه. ففي هنا يمكننا تمرير كائن (object). ويمكننا تمرير mode هنا، وسيكون هذا هو الوضع الابتدائي. فلنُبقيه ربما submit وهو

[02:25] الافتراضي. غير أنّه لَدَينا أيضًا هذا الخيار modeAfterSubmission والذي سيكون هو الوضع بعد أن نُرسل نموذجنا لأول مرة. وافتراضيًّا فهو change. فلنجعله ربما blur.

[02:37] والآن فلنجدّد نموذجنا. ونكتب شيئًا يتضمّن خطأً. وفي البداية لا نحصل على تحقّق. وعندما نُرسل، نحصل على خطأ تحقّقنا. والآن، إذا كتبنا، فلن نحصل على تحقّقنا إلا حين يفقد الحقل تركيزه. لذا سأجعل

[02:52] الحقل يفقد تركيزه الآن. والآن، نحصل على تحقّقنا هكذا.

[02:57] حسنًا. فأرجو أن يكون هذا واضحًا. ولاحظ كذلك أنّه في errorMap لدينا الآن نحصل على onDynamic كذلك. فإذا احتجت أن تعرف أنّ هذا الخطأ جاء من onDynamic، فبإمكانك أيضًا أن تعرف ذلك من هذه errorMap. وباستخدام

[03:11] onDynamic فلن يعني ذلك أنّك لا تستطيع استخدام دوالّ التحقّق الأخرى كذلك بالإضافة إلى onDynamic. ففي هنا يمكنك وبشكلٍ معتادٍ امتلاك تحقّقٍ عبر onChange وتحقّقٍ عبر onBlur وتحقّقٍ عبر onSubmit وما إلى

[03:24] ذلك بالإضافة إلى onDynamic، وكما ذكرنا فلـonDynamic له نسخة غير متزامنة كذلك أيضًا وهي onDynamicAsync يمكنك استخدامها. وأحيانًا يكون تحقّقنا