سمات التحقق من صحة النماذج
طبّق سمات required وminlength وmaxlength وpattern وmin وmax وstep، ونسّق حالات التحقق باستخدام الفئتين الزائفتين :valid و:invalid.
سمات التحقق من صحة النماذج درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
التحقق الأصلي في المتصفح
يوفر HTML5 التحقق المدمج من النماذج من خلال السمات. عند إرسال نموذج، يتحقق المتصفح من كل حقل. وإذا فشل التحقق، يعرض تلميح خطأ أصليًا ويمنع الإرسال، من دون الحاجة إلى JavaScript في الحالات الأساسية.
required
تؤدي إضافة required إلى حقل إدخال أو قائمة select أو textarea إلى جعله إلزاميًا. ويعرض المتصفح خطأً إذا كان الحقل فارغًا عند إرسال النموذج.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength وmaxlength
تفرض minlength حدًا أدنى لعدد المحارف. وتمنع maxlength الإدخال الذي يتجاوز الحد الأقصى. ادمجهما لفرض تعقيد كلمات المرور أو تحديد طول التعليقات.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min وmax وstep لحقول الإدخال الرقمية
تحدد min وmax النطاق الصالح لحقول إدخال الأرقام والتواريخ. وتحدد step مقدار الزيادة، وهو مفيد للنطاقات، مثل 5%، والدقة العشرية، والتواريخ فقط.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — التحقق بالتعبير النمطي
تقبل pattern تعبيرًا نمطيًا بلغة JavaScript. ويجب أن تطابق قيمة الإدخال النمط حتى يُسمح بإرسال النموذج. أضف title لوصف التنسيق المتوقع في تلميح الخطأ الخاص بالمتصفح.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — تعطيل التحقق الأصلي
أضف novalidate إلى عنصر <form> لتعطيل جميع عمليات التحقق الأصلية في المتصفح. افعل ذلك عند تنفيذ عملية تحقق مخصصة باستخدام JavaScript، حتى يحصل المستخدم على تجربة متسقة واحدة.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>التحقق من الصحة في JavaScript
تتيح لك Constraint Validation API التحقق من الصحة برمجيًا: input.validity (كائن ValidityState)، وinput.checkValidity() (يعيد قيمة منطقية)، وinput.setCustomValidity(message) (يعيّن خطأً مخصصًا).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
استدعِ setCustomValidity(message) باستخدام سلسلة غير فارغة لوضع علامة على حقل الإدخال باعتباره غير صالح مع عرض رسالة مخصصة. واستدعِه باستخدام سلسلة فارغة لمسح الخطأ. يفيد ذلك في الحقول التي يتحقق الخادم منها، مثل تفرد اسم المستخدم.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid و:invalid — الفئات الزائفة
نسّق حقول الإدخال الصالحة وغير الصالحة باستخدام فئات CSS الزائفة. انتبه: تكون حقول الإدخال :invalid قبل أن يتفاعل معها المستخدم. استخدم :user-invalid (في المتصفحات الحديثة) أو JavaScript لإضافة الفئة 'touched' أولًا.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }رسائل خطأ مخصصة باستخدام reportValidity
يُظهر form.reportValidity() واجهة التحقق الأصلية للمتصفح لجميع الحقول. استخدمه بعد تعيين رسائل تحقق مخصصة لعرضها للمستخدم من دون انتظار حدث الإرسال.
نمط عرض الأخطاء الميسّر
اعرض الأخطاء المضمّنة باستخدام ما يلي: 1) aria-invalid="true" على حقل الإدخال، 2) فقرة خطأ مرئية مرتبطة باستخدام aria-describedby، 3) انقل التركيز إلى أول حقل غير صالح. يخدم ذلك جميع المستخدمين، بمن فيهم مستخدمو قارئات الشاشة.
تحقق سريع
أي سمة تحد حقل إدخال نصي بـحد أقصى يبلغ 280 حرفًا؟
مراجعة: سمات التحقق من صحة النماذج
required وminlength/maxlength وmin/max/step وpattern — توفّر جميعها تحققًا أصليًا من المتصفح مجانًا. استخدم novalidate عند تنفيذ تحقق مخصص باستخدام JavaScript. تتيح Constraint Validation API لـJavaScript الوصول إلى حالة الصلاحية. نسّق الأخطاء باستخدام :user-invalid بعد تفاعل المستخدم مع الحقل.
الأسئلة الشائعة
هل درس «سمات التحقق من صحة النماذج» مجاني؟
نعم — نص درس «سمات التحقق من صحة النماذج» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «سمات التحقق من صحة النماذج»؟
طبّق سمات required وminlength وmaxlength وpattern وmin وmax وstep، ونسّق حالات التحقق باستخدام الفئتين الزائفتين :valid و:invalid. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «سمات التحقق من صحة النماذج»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عناصر التحكم في النماذج: أنواع input وselect وtextarea
- ARIA وإمكانية الوصول: label وrole وaria-*
- HTML5 الدلالي: العناصر الدلالية مقابل حساء div
- سمات التحقق من صحة النماذج