تقييد الإدخال مع JQuery

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

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

هنا تكمن المشكلة ، لوحة المفاتيح التي تستخدمها تعقيد إدخال البيانات على الإنترنت. من المحتمل أن يكون هناك ما بين 75 و 100 مفتاح ، ويمكن الوصول بسهولة إلى المزيد من الأحرف من خلال عقد مجموعات متعددة المفاتيح. استخدامه لتسجيل الدخول إلى فيسبوك هو أشبه بالخروج من الحليب في سيارة فيراري.

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

هذا يؤدي إلى مشكلة خطيرة في الاستخدام: يطلب من المستخدمين باستمرار "تصحيح" معلوماتهم لتتناسب مع نموذج. هذه طريقة رائعة لزيادة الإحباط وفقدان العمل.

حققت أجهزة touchscreen خطوات كبيرة في هذا المجال من خلال تعديل لوحة المفاتيح على الشاشة لتكييف أنواع المدخلات الممكنة ، إلى البيانات المطلوبة ؛ أدخل عنوان بريد إلكتروني على iPhone على سبيل المثال ، ولن تتمكن من إدخال مسافة عن طريق الخطأ ، لأن شريط المسافة غير متوفر.

صورة لوحة المفاتيح الرقمية عبر Shutterstock

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

أولاً ، نحتاج إلى إعداد حقل إدخال في HTML نريد تقييده ، وهو رقم هاتف على سبيل المثال:

Phone:

بعد ذلك ، في رأس المستند ، نحتاج إلى استيراد jQuery:

وعلى الفور بعد ذلك إضافة البرنامج النصي التالي:

يتم تشغيل هذا البرنامج النصي بمجرد أن يصبح المستند جاهزًا ، مع إرفاق طريقة ضغط المفاتيح في حقل إدخال .phone إدخال. ثم نكتشف المفتاح الذي تم الضغط عليه استنادًا إلى خاصية charCode الخاصة به - يتم تعيين الرقم 0 للرمز 48 ، 1 هو 49 وما إلى ذلك - أي مفتاح خارج النطاق يجب أن يظهر كاذبًا. إذا كانت الطريقة ترجع كاذبة ، فسوف يتجاهل المتصفح ببساطة ضغط المفاتيح.

وهذا يعني أنه إذا قام المستخدم بالضغط على أي مفتاح غير 0-9 ، سيتم تجاهل الإدخال ، مما يحد بشكل فعال من إدخال الأرقام.

يمكننا تطبيق نفس الأسلوب على أي حقل تقريبًا ، وبناء قواعد معقدة باستخدام منطقية و OR منطقية. على سبيل المثال ، إذا أردنا تقييد إدخال اللقب ، فسنحتاج إلى تقييد الإدخال إلى الأحرف الصغيرة (97-122) والأحرف الكبيرة (65 - 90) والواصلة الواصلة (45):

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

تستطيع جرب عرضًا تجريبيًا هنا .

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

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

هل يخطئ المستخدمون بشكل منتظم في النماذج؟ كيف تتعامل مع الأخطاء؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة: صورة لوحة المفاتيح عبر Shutterstock