البحث في الموقع

تُستخدم خاصية التحقق من صحة البيانات Data Validation للتحكم في القيم المُدخلة إلى خلية ما حسب معيار محدد. وتعتبر مفيدة على وجه الخصوص عندما تشارك مصنفاتك مع زملائك في الشركة وترغب في التأكّد من إدخال القيم الصحيحة في تلك الخلية. على سبيل المثال، تقييد المستخدمين بإدخال نص بعدد حروف محدد، أو إدخال قيم موجبة فقط في الخلية. وتتوفر مع هذه الخاصية إمكانية إنشاء رسالة إدخال Input Message تُرشد المستخدمين إلى القيم المناسبة المطلوب إدخالها في الخلية، بالإضافة إلى عرض نافذة تحذيرية Error Alert تنبّه المستخدمين عند إدخال قيمة خاطئة. مثال1: في المصنف التالي، نرغب في التأكد من أن يقوم المستخدمون بإدخال قيم لـ "نسبة الخصم" تتراوح من 15 إلى 25%. أولا، سنحدد الخلية التي نريد تطبيق التحقق من صحة المدخلات عليها، وهي الخلية B15 في هذا المثال، ثم نذهب إلى تبويب بيانات Data وننقر على أمر التحقق من صحة البيانات Data Validation: في مربع الحوار توجد 3 تبويبات. الأول، الإعدادات Settings، ومنه نحدد المعيار الذي يتم التحقق من المدخلات على أساسه، ونلاحظ أنّ الخيار الافتراضي هو السماح بأي قيمة Any Value. وبما أننا في هذا المثال نريد تقييد المستخدم بإدخال قيمة بين 15 و25%، سنسمح بإدخال القيم العشرية باختيار Decimal من حقل Allow، المعيار بين Between من حقل Data، ثم ندخل الحدين الأقصى والأدنى: وفي التبويب الثاني، رسالة الإدخال Input Message، نقوم بإدخال العنوان والتلميح الذي نريد إظهاره للمستخدمين عند تحديد الخلية لتغيير محتواها: إنّ إظهار رسالة التلميح اختياري، يمكنك عدم إظهارها بإلغاء تأشير الخيار Show input message when cell is selected. في التبويب الثالث، التنبيه إلى الخطأ Error Alert، نقوم بإدخال الرسالة التي تظهر للمستخدم عند إدخال قيمة خاطئة، ويفضّل أن تكون رسالة واضحة تُرشد المستخدم إلى الشيء الذي يجب فعله بالضبط. بعدها نحدد نوع التنبيه Style: تختلف أنواع التنبيه كالتالي: إيقاف Stop: يمنع المستخدم من إدخال قيمة غير صحيحة، ولا تؤخذ القيمة ما لم تحقق المعيار. وهذا النوع من التنبيه هو الأكثر تقييدا. تحذير Warning: تُحذر المستخدم بأنّ القيمة التي قام بإدخالها غير صحيحة، لكن يمكن قبول هذه القيمة عند النقر على نعم Yes حتى وإن لم تحقق المعيار، أو تعديل القيمة عند النقر على كلا No. معلومات Information: تُخبر المستخدم بأنّ القيمة غير صحيحة فقط، وهذا النوع من التنبيه عادة ما يكون مرنا ويتم تجاهله من قبل المستخدمين. يمكن عدم إظهار رسالة التنبيه بإلغاء تأشير الخيار Show error alert after invalid data is entered . عند الانتهاء من تعديل كافة الخيارات ننقر موافق OK. وبذلك ستظهر رسالة التلميح عند تحديد الخلية: وعندما نقوم بإدخال قيمة خارج المدى، 12% مثلا، ستظهر رسالة التنبيه حسب النوع الذي اخترناه. بما أننا اخترنا نوع الإيقاف Stop لدينا خيار إعادة المحاولة Retry وإدخال قيمة صحيحة، إلغاء عملية التحرير Cancel، أو الذهاب إلى صفحة المساعدة Help. أما عند اختيار النوع الثاني، تحذير Warning، وإدخال قيمة خاطئة، فيمكننا المواصلة مع هذه القيمة عند النقر على نعم Yes، إعادة إدخال قيمة صحيحة عند النقر على كلا No، إلغاء عملية التحرير بالنقر على Cancel، أو الذهاب إلى صفحة المساعدة Help. وفي النوع الثالث، معلومات Information، يمكننا تجاهل التنبيه بالنقر على موافق OK، إلغاء عملية التحرير Cancel، أو الذهاب إلى صفحة المساعدة Help. مثال2: في هذا المثال البسيط، نريد تقييد المستخدم باختيار لغة من مجموعة لغات تظهر في قائمة منسدلة: سنحدد أولا الخلية التي نريد إضافة القائمة إليها، وهي D3 في هذا المثال، ثم ننقر التحقق من صحة البيانات Data Validation من تبويب بيانات Data: سنختار قائمة List من حقل Allow، ثم نحدد القيم التي نريد إدراجها في القائمة، وقد قمنا بكتابتها مسبقا على جنب: لا نريد هنا إظهار رسالة إدخال ورسالة تنبيه، لذلك سنتجاوز هذه الخطوة وننقر موافق OK. والنتيجة ستكون ظهور سهم بجانب الخلية D3، عند النقر عليه تظهر قائمة اللغات المتاحة التي يمكن الاختيار منها: اقرأ أيضًا دليلك الشامل إلى أنواع البيانات

تقدّم المواصفات الجديدة في CSS3 محدّدين Selector مفيدين للغاية هما :valid و :invalid وهي أصناف زائفة pseudo-class يمكن استخدامها مع عناصر الإدخال الخاصة بالاستمارات. لنفترض أن لديك عنصر إدخال تتحقّق من خلاله فيما إذا كان ما أدخله المستخدم صحيحًا أم خاطئًا. لإجراء عملية التحقق ستحتاج إلى إضافة خاصية HTML5 required إلى الوسم الخاص بعنصر الإدخال، وبهذا يمكن الاستفادة من المحدّدين :valid/:invalid لتغيير لون حقل الإدخال ليعرف المستخدم من خلال ذلك أنّ ما أدخله صحيح أو خاطئ. فعلى سبيل المثال يتحول مربع الإدخال إلى اللون الأخضر عندما تكون العبارة صحيحة، وكما يلي: input:required { background: #AAA; } input:valid { background: #0A0; } input:invalid { background: #A00; } سننشئ في هذا الدرس استمارة بنمط Material وسننبّه المستخدم على صحة البيانات المدخلة في الاستمارة من خلال الصنفين الزائفين :valid و :invalid. تتألف الاستمارة من مربع نصّي وحيد وقد أحطنا عنصري input[type="text"] وlabel بعنصر div يحمل المحدّد .form-control من إطار عمل Bootstrap. لدينا أيضًا شريط سيتغير لونه بين الأخضر والأحمر للدلالة على صحة المعلومات المدخلة من عدمها. <div class="form-control"> <input type="text" required /> <span class="bar"></span> <label for="First Name">First Name</label> </div> في البداية سنزيل جميع الحدود المحيطة بمربّع النص باستثناء الحدّ السفلي وسنلوّنه باللون الأزرق ليكون متناسقًا مع نمط التصميم Material. .form-control { position:relative; margin-top:40px; width:400px; } input { border:none; border-bottom:3px solid #34495e; padding:10px 0; width:400px; display:block; font-size:16px; } سيؤدي العنصر label دور ماسك مكان placeholder، لذا سنجعل موقعه مطلقًا مع تعيين المسافة اليسرى والعلوية المناسبة، ليبدو العنصر بهيئة ماسك مكان اعتيادي. label { position:absolute; top:8px; left:5px; font-size:16px; color:#333; transistion: 0.3s ease all; -webkit-transition:0.3s ease all; } والآن عندما يضغط المستخدم أو يجعل التركيز على مربّع النص سنقوم بإلغاء الحدّ السفلي، وسنغير موقع ماسك المكان ليصبح فوق مربع النص ليبدو كـ label. input:focus{ border:none; outline:none; } سيبقى الـ label فوق مربع النص إلى أن يجعل المستخدم التركيز على مربّع النص ويضيف إليه أي معلومات صحيحة. input:focus ~ label, .form-control input:valid ~ label { top:-10px; font-size:12px; left:2px; color:#111; } لن يظهر المحدّد .bar بصورة تلقائية، بمعنى أن عرضه سيكون صفرًا، وإن قمنا بالتركيز على مربع النص فإن عرض المحدّد .bar سيزداد. كما ستلاحظ فقد حدّدنا العرض ضمن الصنفين الكاذبين (:after و :before) حيث سيزداد العرض 50% لكل عنصر زائف، بمعنى أن الزيادة الكلية ستكون 100%، وهكذا سنحصل على تأثير توسّع جميل. .bar:before, .bar:after { content:''; height:3px; width:0; bottom:1px; position:absolute; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .bar:before { left:50%; } .bar:after { right:50%; } input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } سنغيّر الآن لون خلفية الشريط حسب صحة أو عدم صحة البيانات المدخلة، وذلك باستخدام الصنفين الزائفين :valid و :invalid. input:valid ~ .bar:before, input:valid ~ .bar:after{ background:#2ecc71; } input:invalid ~ .bar:before, input:invalid ~ .bar:after{ background:#e74c3c; } تعمل هذه الطريقة على متصفحات (+Chrome(10 و (+Firefox(4 و (+Safari(5 و (+Opera(10 و (+IE(10، ولكن لا تعمل على الإصدار التاسع وما دونه من متصفح IE. وجدير بالذكر أنّه لن يتم التحقّق من صحة البيانات بأي شكل من الأشكال، ويمكن استخدام هذه الطريقة في مجال تجربة المستخدم فقط. ترجمة - وبتصرّف - للمقال Form validation in pure css لصاحبه Arkaprava Majumder.