فهم ما هو التحقق من صحة نموذج HTML5 وتسمية الإدخال العائمة

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

بالطبع ، لن ترغب في جمع بيانات غير صحيحة من المستخدمين بطريقة غير آمنة. لذلك ، من الضروري بالنسبة لك تحديد قواعد التحقق من صحة النماذج.

لسنوات ، كنا نستخدم المعقد و TL ؛ DR (أي طويل جدًا ؛ لم يقرأ) كود JavaScript لتنفيذ التحقق من صحة النموذج من جانب العميل. لحسن الحظ ، مع إصدار "التحقق من صحة نموذج HTML5" ، يمكننا الآن إضافة عمليات التحقق من صحة النموذج باستخدام الحد الأدنى من JavaScript.

على الرغم من أن أحدث إصدار من HTML يقدم العديد من المزايا ، إلا أن أهمها هو أنه يأتي مزودًا بالعديد من حقول الإدخال الجديدة والسمات الأساسية للتحقق من صحة النموذج دون الحاجة إلى كتابة كود التحقق من JS المعقد (اختصار لـ JavaScript).

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

على سبيل المثال ، يوجد أدناه صورة تم نشرها على Dribble بواسطة Matt Smith توضح كيفية عمل نمط التسمية العائمة عند تطبيقه على نموذج:

تتناول هذه المقالة كيفية تنفيذ تسميات الإدخال العائمة عند إضافة عمليات التحقق من صحة نموذج HTML5.

لكن قبل أن تبدأ

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

نظرة عامة مفصلة على التحقق من صحة نموذج HTML5

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

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

فيما يلي مثال يشرح استخدام السمة المطلوبة لإضافة التحقق من صحة حقل الإدخال:

[بي أتش بي]
الاسم: <input type = "text" name = "yourname" مطلوب>
[/بي أتش بي]

يجعل سطر الكود أعلاه المستعرض الخاص بك على علم بأن اسم الحقل INPUT يجب اعتباره إلزاميًا (أي لا يمكن تركه فارغًا).

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

بصرف النظر عن <input type="text"> (أي أنواع إدخال النص) ، يدعم HTML5 الآن العديد من خيارات الإدخال الجديدة مثل البحث ، والبريد الإلكتروني ، والهاتف ، والوقت ، وما إلى ذلك. بكلمات بسيطة ، باستخدام HTML5 يمكننا كتابة السطر أدناه من الكود :

[بي أتش بي]
<نوع الإدخال = "text" name = "email">
[/بي أتش بي]

في شيء مثل:

[بي أتش بي]
<input type = "email" name = "email">
[/بي أتش بي]

ستعرض متصفحات سطح المكتب الكود أعلاه تمامًا مثل أي حقل نص قياسي.

هناك شيء آخر مهم أود إحضاره إلى إشعارك وهو: عندما تحاول إدخال السمات مثل مطلوب أو نوع الإدخال = "البريد الإلكتروني" في العرض التوضيحي لـ CodePen حتى بدون أي محتوى ، فستظل تتلقى خطأ عند النقر فوق الزر "إرسال" بدون أي عنوان بريد إلكتروني صالح:

في المثال الذي ناقشناه أعلاه ، يمكنك أن ترى أن المتصفح يعرض رسالة خطأ بشكل افتراضي. ولكن ماذا لو كنت ترغب في تطبيق قاعدة التحقق الخاصة بك (أي المخصصة) على قيمة الإدخال؟ هذا هو المكان الذي يكون فيه نمط Regex مفيدًا.

فهم أنماط التعبير العادي

ربما تكون قد رأيت أنماطًا عند إدخال عنوان بريد إلكتروني مثل abc @ a. وغني عن القول أنك تريد من المستخدمين إدخال عنوان بريد إلكتروني حقيقي. ومن خلال تحديد اختيارك للنمط الذي يتطابق مع بياناتك سيساعد في التحقق من صحة القيمة المدخلة. على سبيل المثال ، يمكنك التأكد من أن البريد الإلكتروني يطابق النمط الذي يحتوي على ثلاثة أحرف أو أكثر في النهاية. للقيام بذلك ، ستحتاج إلى استخدام "سمة النمط" والتعبيرات العادية (RegEx).

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

[بي أتش بي]
<input id = "phone" placeholder = "111-111-1111" title = "نص لنقل النمط لرقم الهاتف" النمط المطلوب = "[0-9] {3} - [0-9] {3} - [ 0-9] {4} ">
[/بي أتش بي]

أيضًا ، في حالة حدوث أي أخطاء في التحقق من الصحة ، يمكنك اختيار تحديد سمة العنوان مع خطأ التحقق من الصحة لإلقاء رسالة بجانب "تنسيق خاطئ!" باستخدام السطر التالي من الكود:

[بي أتش بي]
<input type = "email" placeholder = "Email" النمط المطلوب = "^ [A-Za-z0-9 ._٪ + -] + @ [A-Za-z0-9 .-] + \. [A- Za-z] {2،} $ "title =" يرجى إدخال عنوان بريد إلكتروني صالح هنا. ">
[/بي أتش بي]

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

[بي أتش بي]
<نوع الإدخال = "number" min = "8" مطلوب>
[/بي أتش بي]

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

فائدة استخدام التحقق من صحة نموذج HTML5

أكبر ميزة لتنفيذ التحقق من صحة نموذج HTML5 هي الملاحظات الفورية. في الغالب ، سيتم تمييز نوع من الدلالة أثناء قيام المستخدمين بملء بعض الحقول في نموذج ، لإبلاغهم ما إذا كانت القيمة المدخلة صحيحة أم لا.

الآن ، عند إدخال شيء ما في مربع النص ، يتغير لون الحد إلى اللون الأخضر كما يلي:

ومع ذلك ، كما ترى ، هناك جانب سلبي لهذا النهج. حتى عند إضافة قيمة غير صالحة (أو غير كاملة) في حقل "الاسم الأول" ، يحصل المستخدم على إشارة إلى أن القيمة صحيحة. ربما تفكر في إضافة :invalid:not(:empty) في الكود. لسوء الحظ ، لن يعمل هذا المنطق مع المتصفحات لأنها عادة ما تعتبر عناصر النموذج فارغة.

أتساءل ماذا تفعل؟

يمكنك محاولة إضافة المُحدِّد الزائف الجديد المسمى ": placeholder-shown" في الكود كما يلي:

[بي أتش بي]
<form>
<التسمية>
<span> الاسم الأول </ span>
<input type = "text" pattern = ". {4،}" placeholder = "" required title = "أدخل 4 أحرف على الأقل.">
</label>

<button> إرسال </ زر>

</form>
[/بي أتش بي]

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

[بي أتش بي]
$ ('input: blank، textarea: blank'). addClass ('blank')؛

$ ('input'). keyup (function () {

إذا ($ (this) .val (). trim ()! == ”) {

$ (هذا) .removeClass ('فارغ') ؛

} آخر {

$ (this) .addClass ('فارغ')؛

}

}) ؛
[/بي أتش بي]

ملاحظة : تذكر إزالة العنصر النائب من ترميز HTML أعلاه.

الآن عند تشغيل مقتطف الشفرة أعلاه مع ترميز HTML5 ، سيبدو الناتج كما يلي:

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

ولكن بمجرد قيام المستخدم بإدخال كامل (يتجاوز 3 أحرف) يتغير لون حدود مربع النص إلى اللون الأخضر.

كيف يمكنك إضافة عنوان إدخال عائم في HTML5؟

والآن ، دعنا نناقش طريقة إضافة تسمية الإدخال العائمة عند التحقق من صحة نموذج HTML5 الخاص بك. القيام بذلك ، يساعد في تعزيز الشكل والمظهر للشكل. ها هي ترميز HTML.

لتنفيذ نمط التسمية العائمة ، سيتعين عليك دفع العلامة مباشرةً أسفل عنصر <input> في ترميز HTML الخاص بك:

[بي أتش بي]
<form>
<التسمية>
<input type = "text" pattern = ". {4،}" مطلوب العنوان = "يجب ألا تقل الأحرف عن 4.">
<span> اسمك </ span>
</label>
<التسمية>
<input type = "email" required pattern = "^ [A-Za-z0-9 ._٪ + -] + @ [A-Za-z0-9 .-] + \. [A-Za-z] { 2،} $ "title =" الرجاء إدخال بريد إلكتروني صالح. ">
<span> بريدك الإلكتروني </ span>
</label>
<button> إرسال </ زر>

</form>
[/بي أتش بي]

سيبدو CSS كما يلي:

[المغلق]
ضع الكلمة المناسبة {
الموقف: نسبي ؛
عرض: مضمنة كتلة ؛
}
تمتد التسمية {
الموقف: مطلق.
اليسار: 20 بكسل ؛
أعلى: -2em ؛
حجم الخط: 75em ؛
المؤشر: نص ؛
اللون: # f27853 ؛
الانتقال: كل 150 مللي ثانية ؛
}
إدخال {
الحد: 1 بكسل صلب # f2f2f2 ؛
المخطط التفصيلي: لا شيء ؛
}
الإدخال: التركيز {
لون الحدود: # d9d9d9 ؛
}
الإدخال: صالح {
لون الحدود: # 42d142 ؛
}
الإدخال: غير صالح {
لون الحدود: # ff8e7a ؛
}
المدخلات الفارغة {
لون الحدود: # d9d9d9 ؛
}
input.empty + span {
أعلى: 50٪؛
التحويل: translateY (-50٪) ؛
حجم الخط: 1em ؛
الخلفية: لا شيء ؛
اللون: #cccccc؛
}
الجسم {
عرض: فليكس ؛
ارتفاع الحد الأدنى: 100vh ؛
الخلفية: # f1f1f1 ؛
عائلة الخطوط: 'Lato'، sans-serif؛
حجم الخط: 150٪؛
}
شكل {
الهامش: تلقائي ؛
}

إدخال ، زر {
الحشو: 15 بكسل 20 بكسل ؛
نصف قطر الحدود: 1 بكسل ؛
الحدود: 2px صلب #bdbdbd ؛
}

زر {
لون الحدود: # 363636 ؛
الخلفية: # 363636 ؛
اللون: #FFFFFF ؛
}
[/ css]

وأخيرًا ، اكتب كود JavaScript:

[الشفرة]
$ ('input: blank، textarea: blank'). addClass ('blank')؛
$ ('input'). keyup (function () {
إذا ($ (this) .val (). trim ()! == ”) {
$ (هذا) .removeClass ('فارغ') ؛
} آخر {
$ (this) .addClass ('فارغ')؛
}
}) ؛
[/الشفرة]

انتاج:

يمكنك تنفيذ العديد من التأثيرات عند استخدام تسميات الإدخال العائمة في HTML5 ، مثل:

• أضف أيقونات بتأثير التلاشي للداخل / الخارج أثناء التحقق من نموذج HTML5.
• هز الإدخال إذا كانت البيانات المدخلة غير صالحة.
• اجعل لون المدخلات باهتًا عند ملؤها بشكل صحيح.

أشياء للإعتبار

عند العمل على تنفيذ عمليات التحقق من صحة نموذج HTML5 ، يجب أن تكون على دراية بما يلي:

1. دعم المتصفح : تعمل نماذج HTML5 في المتصفحات الحديثة و IE10 + بطريقة مثالية. على الرغم من أن الإصدار 9 من IE والإصدارات الأقدم لا تدعم المحددات الزائفة للتحقق والتي تمنعك من تصميم النموذج ، إلا أنها ستظل تعمل بشكل صحيح.
2. تحذير : هناك شيء واحد لا يمكنك تنفيذه عند تطبيق عمليات التحقق من الصحة على نموذج HTML5 وهو تصميم رسائل التحقق من الصحة. هذا بسبب تعطيل هذه الوظيفة بواسطة المتصفحات.

الكلمات الأخيرة

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

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