الدليل الشامل لأشكال HTML والتحقق من القيود

في هذه المقالة، نلقي نظرة على حقول النموذج في HTML وخيارات التحقق من الصحة التي يقدمها HTML5. سننظر أيضًا في كيف يمكن تعزيز هذه من خلال استخدام CSS وJavaScript.

ما هو التحقق من القيود؟

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

تمتلك المتصفحات الحديثة القدرة على التحقق من أن هذه القيود تُلاحظ من قبل المستخدمين، ويمكنها تحذيرهم عندما تتعرض تلك القواعد للانتهاك. وهذا ما يعرف بـ التحقق من القيود.

التحقق من الصحة من الجانب العميل مقابل التحقق من الصحة من الجانب الخادم

كانت معظم رموز JavaScript التي تم كتابتها في السنوات الأولى من لغة البرمجة يتعامل مع التحقق من صحة النموذج من الجانب العميل. حتى اليوم، يقضي المطورون وقتًا كبيرًا في كتابة وظائف للتحقق من قيم الحقول. هل من الضروري الاستمرار في ذلك في المتصفحات الحديثة؟ على الأرجح لا. في معظم الحالات، يعتمد الأمر حقًا على ما تحاول القيام به.

لكن أولاً، إليك رسالة تحذير كبيرة:

التحقق من الصحة من الجانب العميل هو جمال يمكن أن يمنع الأخطاء الشائعة في إدخال البيانات قبل أن يضيع التطبيق الوقت وعرض الموجة التي يرسل بها البيانات إلى الخادم. إنه ليس ببديل للتحقق من الصحة من الجانب الخادم!

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

حقول الإدخال HTML5

توفّر HTML:

• <textarea> لصناديق النص متعددة الأسطر
• <select> لقائمة الخيارات المنسدلة
• <button> للأزرار

لكنك ستستخدم <input> غالبًا:

<input type="text" name="username" />

يحدّد سمة type نوع التحكم، وهناك خيارات كثيرة:

type	description
button	a button with no default behavior
checkbox	a check/tick box
color	a color picker
date	a date picker for the year, month, and day
datetime-local	a date and time picker
email	an email entry field
file	a file picker
hidden	a hidden field
image	a button which displays the image defined by the src attribute
month	a month and year picker
number	a number entry field
password	a password entry field with obscured text
radio	a radio button
range	a slider control
reset	a button that resets all form inputs to their default values (but avoid using this, as it’s rarely useful)
search	a search entry field
submit	a form submission button
tel	a telephone number entry field
text	a text entry field
time	a time picker with no time zone
url	a URL entry field
week	a week number and year picker

يعود المتصفّح إلى text إذا تركت سمة type أو لم يدعم خيارًا. تمتلك المتصفّحات الحديثة دعمًا جيّدًا لجميع الأنواع، لكن المتصفّحات القديمة ستظهر مجرد حقل للإدخال.

تشمل السمات الأخرى المفيدة لـ <input>:

attribute	description
accept	file upload type
alt	alternative text for the image types
autocomplete	hint for field auto-completion
autofocus	focus field on page load
capture	media capture input method
checked	checkbox/radio is checked
disabled	disable the control (it won’t be validated or have its value submitted)
form	associate with a form using this ID
formaction	URL for submission on submit and image buttons
inputmode	data type hint
list	ID of <datalist> autocomplete options
max	maximum value
maxlength	maximum string length
min	minimum value
minlength	minimum string length
name	name of control, as submitted to server
pattern	a regular expression pattern, such as [A-Z]+ for one or more uppercase characters
placeholder	placeholder text when the field value is empty
readonly	the field is not editable, but it will still be validated and submitted
required	the field is required
size	the size of the control (often overridden in CSS)
spellcheck	set true or false spell-checking
src	image URL
step	incremental values in numbers and ranges
type	field type (see above)
value	the initial value

حقول الإخراج HTML

بالإضافة إلى أنواع الإدخال، توفّر HTML5 إخراجات للقراءة فقط:

• output: نتيجة خطابية لحساب أو إجراء مستخدم
• progress: شريط تقدم بسمات value و max
• meter: مقياس يمكن أن يتغير بين الأخضر والبرتقالي والأحمر اعتمادًا على القيم المعينة لسمات value، min، max، low، high، و optimum.

تسميات الإدخال

يجب أن يكون للحقول تسمية مرتبطة <label>، والتي يمكنك تضمين العنصر داخلها:

<label>your name <input type="text" name="name" /><label>

أو ربط معرف الحقل id بالتسمية باستخدام سمة for:

<label for="nameid">your name</label>
<input type="text" id="nameid" name="name" />

التسميات مهمة للوصول. ربما واجهت نماذج تستخدم placeholder لتوفير مساحة الشاشة:

<input type="text" name="name" value="" placeholder="your name" />

يختفي نص المكان المحجوز عندما يكتب المستخدم شيئًا — حتى مسافة واحدة. من الأفضل إظهار تسمية بدلاً من إجبار المستخدم على تذكر ما كان يريده الحقل!

سلوكيات الإدخال

أنواع الحقول وسمات التقييد تغير سلوكيات الإدخال في المتصفح. على سبيل المثال، إدخال number يظهر لوحة أرقام على الأجهزة المحمولة. قد يظهر الحقل مقبضًا وستزيد وتنقص القيم بالضغط على مفتاح الصعود/النزول.

معظم أنواع الحقول واضحة، ولكن هناك استثناءات. على سبيل المثال، البطاقات الائتمانية هي رقمية، لكن زيادة/نقصان المجموعة المتحركة لا فائدة منها ومن السهل ضغط الأعلى أو الأسفل عند إدخال رقم مكون من 16 خانة. من الأفضل استخدام نوع text قياسي، ولكن تحديد سمة inputmode لـ numeric، مما يعرض لوحة مفاتيح مناسبة. تحديد autocomplete="cc-number" أيضا يشير إلى أي بطاقات سابقة أو مسجلة مسبقا.

استخدام النوع الصحيح للحقل type و autocorrect يقدم مزايا يصعب تحقيقها باستخدام JavaScript. على سبيل المثال، بعض متصفحات الهواتف المحمولة يمكنها:

• استيراد تفاصيل بطاقة الائتمان عن طريق مسح البطاقة باستخدام الكاميرا
• استيراد الرموز الفردية المرسلة عبر الرسائل النصية

التحقق التلقائي

يضمن المتصفح أن قيمة الإدخال تلتزم بالقيود المحددة من قبل سمات type، min، max، step، minlength، maxlength، pattern، و required. على سبيل المثال:

<input type="number" min="1" max="100" required />

محاولة تقديم قيمة فارغة تمنع تقديم النموذج ويظهر الرسالة التالية في Chrome:

الملفات المتطايرة لن تسمح بقيم خارج النطاق من 1 إلى 100. تظهر رسائل تحقق من صحة مماثلة إذا كتبت سلسلة غير رقمية. كل ذلك دون سطر واحد من JavaScript.

يمكنك التوقف عن تحقق من صحة المتصفح عن طريق:

• إضافة وصفة novalidate إلى عنصر <form>
• إضافة وصفة formnovalidate إلى زر التقديم أو الصورة

إنشاء إدخالات JavaScript المخصصة

إذا كنت تكتب مكون إدخال ل日期 يعتمد على JavaScript جديد ، فيرجى التوقف والابتعاد عن لوحة المفاتيح!

كتابة عناصر الإدخال المخصصة من الصعب. عليك التأكد من الماوس والمفاتيح واللمس والكلام والوصولية وأبعاد الشاشة وما يحدث عندما يفشل JavaScript. أنت أيضا تخلق تجربة مستخدم مختلفة. ربما تكون عنصر التحكم الخاص بك أفضل من منتقي التواريخ القياسي على سطح المكتب وiOS وAndroid ، ولكن ناسف الواجهة الغير مألوفة بعض المستخدمين.

هناك ثلاثة أسباب رئيسية يختار المطورون إنشاء إدخالات يعتمد عليها JavaScript.

1. التحكم في المعايير صعب التنسيق

تنسيق CSS محدود وغالبا ما يتطلب حيل ، مثل تراكب الإدخال مع ::before و ::after الوكيل من التسمية. الوضع يتحسن ، ولكن سؤال أي تصميم يميل إلى الشكل على الوظيفة.

2. لا تدعم أنواع <input> الحديثة في المتصفحات القديمة

في جوهرها، أنت تقوم ببرمجة لإنترنت إكسبلورر. المستخدمون الذين يستخدمون IE لن يحصلوا على منتخب التواريخ ولكن يمكنهم متابعة كتابة التواريخ بتنسيق YYYY-MM-DD. إذا اصر عميلك على ذلك، فقط قم بتحميل polyfill في IE. لا داعي لإضافة حمل على المتصفحات الحديثة.

3. تحتاج إلى نوع إدخال جديد لم يتم تنفيذه من قبل

هذه الحالات نادرة، لكن تبدأ دائمًا بحقول HTML5 المناسبة. هذه الحقول سريعة وتعمل حتى قبل تحميل السكربت. يمكنك تحسين تطور الحقول تدريجيًا حسب الحاجة. على سبيل المثال، يمكن لبعض جافا سكريبت التأكد من أن تاريخ نهاية الحدث التقويمي يأتي بعد تاريخ البداية.

في الملخص: تجنب إعادة إبداع ضوابط HTML!

تصاميم التحقق من صحة الـ CSS

يمكنك تطبيق الآتي فصليات شبه على حقول الإدخال لتزيينها وفقًا للحالة الحالية:

selector	description
:focus	the field with focus
:focus-within	an element contains a field with focus (yes, it’s a parent selector!)
:focus-visible	an element has focus owing to keyboard navigation, so a focus ring or more evident styling is necessary
:required	a field with a required attribute
:optional	a field without a required attribute
:valid	a field that has passed validation
:invalid	a field that has not passed validation
:user-valid	a field that has passed validation after the user has interacted with it (Firefox only)
:user-invalid	a field that hasn’t passed validation after the user has interacted with it (Firefox only)
:in-range	the value is within range on a number or range input
:out-of-range	the value is out of range on a number or range input
:disabled	a field with a disabled attribute
:enabled	a field without a disabled attribute
:read-only	a field with a read-only attribute
:read-write:	a field without a read-only attribute
:checked	a checked checkbox or radio button
:indeterminate	an indeterminate checkbox or radio state, such as when all radio buttons are unchecked
:default	the default submit button or image

يمكنك تزيين نص placeholder في الإدخال باستخدام ::placeholder فصلي شبه:

/* نص placeholder زرقاء في حقول البريد الإلكتروني */
input[type="email"]::placeholder {
  color: blue;
}

المختصرات أعلاه لها نفس التفضيلية، لذا يمكن أن يكون الترتيب مهمًا. ضع في اعتبارك هذا المثال:

input:invalid { color: red; }
input:enabled { color: black; }

الإدخالات غير الصحيحة لها نص أحمر، ولكنها تطبق فقط على الإدخالات التي لها سمة disabled — لذا فإن جميع الإدخالات المفعلة مظللة بالأسود.

يطبق المتصفح تصاميم التحقق من الصحة في تحميل الصفحة. على سبيل المثال، في الكود التالي يتم تعيين حدود حمراء لكل حقل غير صالح:

:invalid {
  border-color: #900;
}

يواجه المستخدم مجموعة مخيفة من الصناديق الحمراء قبل التفاعل مع النموذج. إظهار أخطاء التحقق من الصحة بعد التسجيل الأول أو عند تغيير القيمة من شأنه أن يوفر تجربة أفضل. هنا يأتي دور JavaScript…

JavaScript وواجهة تحقق التحقق من التحقق

يوفر واجهة تحقق التحقق من التحقق خيارات تخصيص النموذج التي يمكن أن تعزز الشيكات القياسية لحقول HTML. يمكنك:

• تعطيل التحقق من الصحة حتى يتفاعل المستخدم مع حقل أو يقوم بتسجيل النموذج
• إظهار رسائل الخطأ بأنماط تخصيصية
• توفير تحقق تخصيصي لا يمكن تحقيقه في HTML وحده. هذا غالبا ما يكون ضروريا عندما تحتاج إلى مقارنة قيمتين – مثل عند إدخال عنوان بريد إلكتروني أو رقم هاتف، تحقق من أن “جديد” و “تأكيد” حقول كلمة المرور لها نفس القيمة، أو تأكد من أن تاريخ واحد يأتي بعد آخر.

تحقق من التحقق من النموذج

قبل استخدام الواجهة، يجب على الكود الخاص بك تعطيل التحقق الافتراضي ورسائل الخطأ عن طريق تعيين خاصية noValidate للنموذج إلى true (وهو نفسه إضافة السمة novalidate):

const myform = document.getElementById('myform');
myform.noValidate = true;

يمكنك بعد ذلك إضافة معالجين الأحداث – مثل عند تسجيل النموذج:

myform.addEventListener('submit', validateForm);

يمكن للمعالج التحقق من أن النموذج بأكمله صالح باستخدام طرق checkValidity() أو reportValidity()، والتي ترجع true عندما تكون جميع مدخلات النموذج صالحة. (الفرق هو أن checkValidity() يتحقق مما إذا كانت أية مداخل تخضع للتحقق من التحقق.)

وثائق Mozilla توضح:

يتم تشغيل حدث غير صالح أيضًا على كل حقل غير صالح. لا يفوز في الركلة: يجب إضافة معالجين إلى كل ضايقة تستخدمها.

// التحقق من النموذج عند تقديمه
function validateForm(e) {

  const form = e.target;

  if (form.checkValidity()) {

    // النموذج صالح - اجراء المزيد من الفحوصات

  }
  else {

    // النموذج غير صالح - إلغاء التقديم
    e.preventDefault();

  }

};

A valid form could now incur further validation checks. Similarly, an invalid form could have invalid fields highlighted.

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

الحقول الفردية لها الخصائص التالية للتحقق من صحة القيود:

• willValidate: ترجع true إذا كان العنصر مرشحًا للتحقق من صحة القيود.

• validationMessage: رسالة التحقق من الصحة. ستكون سلسلة فارغة إذا كان الحقل صالحًا.

• valitity: كائن ValidityState. يحتوي على خاصية valid تُضبط على true عندما يكون الحقل صالحًا. إذا كانت false، سيكون إحدى الخصائص التالية true:

  ValidityState	وصف
  .badInput	لا يمكن للمتصفح فهم الإدخال
  .customError	تم تعيين رسالة صحة مخصصة
  .patternMismatch	القيمة لا تتطابق مع السمة pattern المحددة
  .rangeOverflow	القيمة أكبر من سمة max
  .rangeUnderflow	القيمة أقل من سمة min
  .stepMismatch	القيمة لا تتناسب مع قواعد سمة step
  .tooLong	طول السلسلة أكبر من سمة maxlength
  .tooShort	طول السلسلة أقل من سمة minlength
  .typeMismatch	القيمة ليست بريد إلكتروني صالح أو رابط
  .valueMissing	القيمة المطلوبة فارغة

الحقول الفردية تمتلك الطرق التالية لتحقيق التحقق من التحقق من القيود:

• setCustomValidity(message): تعيين رسالة خطأ لحقل غير صالح. يجب تمرير سلسلة فارغة عندما يكون الحقل صالحًا أو سيظل الحقل غير صالح إلى الأبد.
• checkValidity(): تُرجع true عندما يكون الإدخال صالحًا. تفعل خاصية valitity.valid الشيء نفسه، ولكن checkValidity() تثير أيضًا حدث invalid على الحقل والذي قد يكون مفيدًا.

يمكن لدالة validateForm() المعالج تكرار كل حقل وتطبيق فئة invalid على عنصر الوالد حيثما يكون ذلك ضروريًا:

function validateForm(e) {
  const form = e.target;
  if (form.checkValidity()) {
    // النموذج صالح - اجراء المزيد من الفحوصات
  }
  else {
    // النموذج غير صالح - لغو إرسال
    e.preventDefault();
    // تطبيق فئة غير صالح
    Array.from(form.elements).forEach(i => {
      if (i.checkValidity()) {
        // الحقل صالح - إزالة الفئة
        i.parentElement.classList.remove('invalid');
      }
      else {
        // الحقل غير صالح - إضافة الفئة
        i.parentElement.classList.add('invalid');
      }
    });
  }
};

افترض أن HTML الخاص بك حدد حقل البريد الإلكتروني:

<div>
  <label for="email">email</label>
  <input type="email" id="email" name="email" required />
  <p class="help">Please enter a valid email address</p>
</div>

السِّيرة تطبِّق فئة غير صالحة على الـ <div> عندما لا يتم تحديد البريد الإلكتروني أو يكون غير صالح. يمكن لـ CSS إظهار أو إخفاء رسالة التحقق عند تقديم النموذج:

.help { display: none; }
.invalid .help { display: block; }
.invalid label, .invalid input, .invalid .help {
  color: red;
  border-color: red;
}

إنشاء مصادقة نموذج مخصصة

العرض التوضيحي التالي يوضح مثال على نموذج اتصال يتطلَّب اسم مستخدم وإمَّا عنوان بريد إلكتروني أو رقم هاتف، أو كليهما:

يتم تنفيذه باستخدام فئة تحقق من الأشكال العامة تسمى FormValidate. يتم تمرير عنصر نموذج عند إنشاء كائن. يمكن تعيين معامل ثاني اختياري:

• true للتحقق من كل حقل أثناء تفاعل المستخدم معه
• false (الافتراضي) للتحقق من جميع الحقول بعد التقديم الأول (تحقق المستوى الحقلي يحدث بعد ذلك)

// تحقق من نموذج الاتصال
const contactForm = new FormValidate(document.getElementById('contact'), false);

يعرِّف طريقة .addCustom(field, func) وظائف التحقق المخصصة. الرمز التالي يضمن صحة الحقول البريد الإلكتروني أو الهاتف (لا تحتوي أي منهما على سمات مطلوبة):

// التحقق المخصص - البريد الإلكتروني و/أو الهاتف
const
  email = document.getElementById('email'),
  tel = document.getElementById('tel');

contactForm.addCustom(email, f => f.value || tel.value);
contactForm.addCustom(tel, f => f.value || email.value);

A FormValidate object monitors both of the following:

• focusout الأحداث، التي تتحقق بعد ذلك من حقل فردي
• أحداث تقديم النموذج، التي تتحقق بعد ذلك من كل حقل

كلاهما يستدعي طريقة .validateField(field)، التي تتحقق مما إذا كان حقل يمر على التحقق القياسي للقيود. عندما يفعل، تُنفَّذ أي وظائف التحقق المخصصة المعينة لهذا الحقل بالتتابع. يجب أن يعود جميعها true لكي يكون الحقل صالحًا.

الحقول الخاطئة لها فئة invalid تطبق على عنصر الوالد للحقل، مما يعرض رسالة تؤكد اللون الأحمر باستخدام CSS.

أخيرًا، يقوم الكائن باستدعاء وظيفة submit مخصصة عندما يكون النموذج بأكمله صالحًا:

// التحويل المخصص
contactForm.submit = e => {
  e.preventDefault();
  alert('Form is valid!\n(open the console)');
  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ': ' + value);
  }
}

بديلًا، يمكنك استخدام addEventListener القياسي للتعامل مع أحداث submit للنماذج، حيث أن FormValidate يمنع تشغيل المعالجين الإضافيين عندما يكون النموذج غير صالح.

أداء النموذج

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

توصيات:

• استخدم أنواع الإدخال HTML القياسية حيثما كان ذلك ممكنًا. حدد السمات min، max، step، minlength، maxlength، pattern، required، inputmode، و autocomplete حسب الضرورة.
• إذا لزم الأمر، استخدم القليل من JavaScript لتمكين التحقق المخصص والرسائل.
• بالنسبة للحقول الأكثر تعقيدًا، قم بتحسين الإدخالات القياسية تدريجيًا.

أخيرًا: تذكر Internet Explorer!

إلا إذا كان عملاؤك يستخدمون بشكل أساسي متصفح IE، فليس هناك حاجة لتنفيذ وظائف التحقق المتأني الخاصة بك. كل الحقول المدخلة في HTML5 تعمل في IE ولكن قد تتطلب مجهودًا أكبر من المستخدمين. (على سبيل المثال، IE لن يكتشف عندما تدخل عنوان بريد إلكتروني غير صالح.) لا يزال عليك تحقق من البيانات على الخادم، لذا ضع هذا في الاعتبار كأساس للتحقق من أخطاء IE.

الأسئلة الشائعة (FAQs) حول النماذج الإلكترونية والتحقق من القيود