التحقق من صحة النماذج في عام 2026: توقف عن استخدام المكتبات دون داعٍ

لست بحاجة إلى مكتبة JavaScript ثقيلة للتحقق من صحة النموذج في عام 2026.

لقد أطلقت نموذج دفع الشهر الماضي دون استخدام أي مكتبات للتحقق من الصحة. لقد تعامل النموذج مع الحقول المطلوبة، وتنسيقات البريد الإلكتروني، وأطوال كلمات المرور باستخدام HTML الأصلي و30 سطرًا فقط من JavaScript.

قبل أن تقوم بتشغيل npm install ، استخدم هذه السمات الست الأصلية لحل معظم المشكلات:

• required: تمنع الإرسال الفارغ للنصوص، والقوائم المنسدلة (selects)، وصناديق الاختيار (checkboxes). • type: استخدم type="email" أو type="url" لاكتشاف أخطاء التنسيق الأساسية. • minlength و maxlength: تفرض حدودًا لعدد الأحرف دون الحاجة إلى منطق برمجي مخصص. • min و max و step: تتحكم في النطاقات للأرقام والتواريخ. • pattern: تستخدم التعبيرات النمطية (regex) لفرض تنسيقات محددة مثل الرموز البريدية. • inputmode و autocomplete: تقلل الأخطاء عن طريق إظهار لوحة المفاتيح المناسبة أو ملء البيانات المعروفة.

إذا كانت الرسائل الأصلية عامة جدًا، فاستخدم Constraint Validation API.

كل عنصر إدخال يحتوي على كائن validity. يمكنك التحقق من خصائص مثل valueMissing أو typeMismatch لكتابة رسائل خطأ مفيدة. استخدم setCustomValidity لعرض نصك الخاص.

تذكر مسح رسالتك المخصصة عند حدث الإدخال (input event). إذا لم تفعل ذلك، فسيظل الحقل عالقًا في حالة خطأ حتى بعد قيام المستخدم بإصلاحه.

بالنسبة للتنسيق، توقف عن استخدام JavaScript لتتبع ما إذا كان الحقل قد "تم لمسه" (touched).

فئة CSS الزائفة :user-invalid تتولى هذه المهمة الآن. فهي تطبق التنسيقات فقط بعد تفاعل المستخدم مع الحقل. ادمجها مع محدد :has() لعرض نص الخطأ تلقائيًا. هذا يزيل عشرات الأسطر من الكود غير الضروري.

متى يجب عليك استخدام مكتبة بالفعل؟

لا تلجأ إلى مكتبة إلا في حالتين محددتين:

  1. التحقق عبر الحقول (Cross-field validation): عندما يعتمد حقل على آخر، مثل "تأكيد كلمة المرور" أو المنطق الشرطي المعقد.
  2. التحقق غير المتزامن (Async validation): عندما تحتاج إلى التحقق من قاعدة بيانات، مثل "هل اسم المستخدم هذا مأخوذ؟"

إذا كان نموذجك يحتاج فقط إلى قواعد للحقول الفردية، فالتزم بالحلول الأصلية. كود أقل يعني أخطاءً أقل. ابدأ بالمتصفح. لا تضف مكتبة إلا عندما يصل المتصفح إلى حدوده القصوى.

المصدر: https://dev.to/raxxostudios/form-validation-in-2026-6-native-constraints-before-you-reach-for-a-library-3474

مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi