HTML Academy · درس

Constraint Validation API

قراءة حالات الصلاحية والتحقق من القيود باستخدام JavaScript

Constraint Validation API درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

التحقق من الصحة دون JavaScript

قدّم HTML5 التحقق المضمّن من صحة النماذج عبر سمات مثل: required، type="email"، type="number"، min، max، pattern، minlength، maxlength. ينجز المتصفح التحقق تلقائيًا عند الإرسال ويعرض رسائل الخطأ، دون الحاجة إلى JS.

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>

محددات التحقق من الصحة في CSS

يطابق :invalid حقول الإدخال التي تفشل في التحقق، بينما يطابق :valid الحقول التي تجتازه. أما :user-invalid (في المتصفحات الحديثة) فلا يطابق الحقول إلا بعد تفاعل المستخدم معها، مما يتجنب ظهور حدود حمراء في نموذج لم يتفاعل معه المستخدم بعد. نسّق الأخطاء باستخدام هذه الأصناف الزائفة.

input:user-invalid {
  border-color: red;
}
input:user-invalid + .error {
  display: block;
}

كائن ValidityState

يوفّر كل عنصر تحكم في النموذج خاصية validity، وهي كائن ValidityState يحتوي على أعلام منطقية مثل: valid، valueMissing، typeMismatch، patternMismatch، rangeUnderflow، tooShort وغيرها. افحص هذه الأعلام لتحديد الخطأ الذي ينبغي عرضه.

const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
  showError(input, "Please enter a valid email address");
}

دالة checkValidity

تعيد input.checkValidity() القيمة true إذا استوفت القيمة جميع القيود، وتعيد false خلاف ذلك. أما form.checkValidity() فتتحقق من النموذج بأكمله. يفيد ذلك في عمليات التحقق البرمجية قبل تنفيذ AJAX أو قبل السماح للمستخدم بالانتقال إلى الخطوة التالية في معالج متعدد الخطوات.

دالة reportValidity

تتصرف input.reportValidity() مثل checkValidity، لكنها تُظهر أيضًا تلميح المتصفح المضمّن وتضع التركيز على أول حقل غير صالح. استخدموها عندما تريدون الحصول على واجهة المتصفح الأصلية دون جهد، واستخدموا checkValidity عندما تريدون عرض الأخطاء بطريقة مخصصة بالكامل.

تخصيص الرسائل المضمّنة

قد لا تتوافق الرسائل الافتراضية للمتصفح («يرجى ملء هذا الحقل») مع أسلوبكم أو لغتكم. استبدلوها باستخدام input.setCustomValidity("Enter a valid coupon code"). يظل حقل الإدخال غير صالح إلى أن تمسحوا الرسالة باستخدام setCustomValidity("").

تعطيل واجهة المتصفح باستخدام novalidate

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

الاستماع إلى أحداث invalid

يطلق كل عنصر تحكم حدث invalid عند فشل التحقق. استمعوا إلى هذا الحدث لمنع التلميح الافتراضي وعرض رسالة مخصصة: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

النمط باستخدام التعابير النمطية

تحتوي السمة pattern على تعبير نمطي في JavaScript يجب أن تطابقه القيمة بالكامل، ولا حاجة إلى مرساتي ^ و$ لأنهما ضمنيتان. أقرنوا ذلك بالسمة title لوصف التنسيق المتوقع للمستخدمين.

لا يزال التحقق على الخادم مطلوبًا

يوفّر التحقق في HTML سهولة للمستخدمين، لكن يمكن لأي شخص تجاوزه بتعديل DOM. أعيدوا التحقق دائمًا على الخادم. وُجدت قيود HTML لتحسين تجربة المستخدم، مثل تقديم ملاحظات فورية وتقليل طلبات الشبكة، وليس لأغراض الأمان.

دمج عدة قيود

تتراكم القيود: يجب أن تكون <input type="number" min="18" max="120" required step="1"> موجودة، وأن تحتوي على عدد صحيح بين 18 و120. يوضّح المتصفح القيد المحدد الذي فشل عبر أعلام ValidityState، حتى تتمكنوا من عرض الرسالة المناسبة.

اختبار المعرفة

كيف يختلف صنف CSS الزائف :user-invalid عن :invalid؟

الخلاصة

توفّر سمات التحقق الأصلية (required وtype وpattern وmin وmax) إلى جانب واجهة ValidityState API تحققًا قويًا من جهة العميل دون الحاجة إلى JS افتراضيًا. ينسّق CSS :user-invalid الأخطاء بعد تفاعل المستخدم. وتتيح checkValidity وreportValidity إجراء عمليات تحقق برمجية، بينما تستبدل setCustomValidity الرسائل الافتراضية. أعيدوا التحقق دائمًا على الخادم.

الأسئلة الشائعة

هل درس «Constraint Validation API» مجاني؟

نعم — نص درس «Constraint Validation API» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «Constraint Validation API»؟

قراءة حالات الصلاحية والتحقق من القيود باستخدام JavaScript تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «Constraint Validation API»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

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

← العودة إلى HTML Academy