اعتبارسنجی Form ها (جلسه 12) : ساخت Polyfill برای مرورگرهای قدیمی - قسمت 1

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۵ مهر ۱۳۹۶

همونطور که اطلاع دارید در جلسات گذشته اعتبارسنجی form‌ها با استفاده از HTML و Javascript رو بصورت کامل به شما آموزش دادیم. در این قسمت و قسمتهای بعدی میخوایم یک Polyfill کم حجم و کوچک رو با هم بسازیم تا بتونیم مرورگرهای بیشتری رو تحت پوشش قرار بدیم. برای ساخت این Polyfill از Validity State API کمک میگیریم و چیزهای دیگه رو نیز در کنار اون قرار میدیم تا بتونیم مرورگرهای IE9 به بالا رو تحت پوشش قرار بدیم.

تست پشتیبانی

اولین کاری که باید انجام بدیم اینه که ببینیم مرورگر فعلی از Validity State API پشتیبانی می‌کند یا خیر.

برای اینکار یک تابع بنام supported تعریف میکنیم و درون اون با استفاده از متد createElement یک input میسازیم و بعد از اون چک میکنیم که ویژگی validity برای این المنت وجود دارد یا خیر. اگر وجود داشته باشه که به معنای اینه که مرورگر فعلی از Validity State پشتیبانی میکنه.

var supported = function () {
    var input = document.createElement('input');
    return ('validity' in input);
};

کد بالا رو در هر مرورگری که باز کنیم و تابع رو اجرا کنیم، یا true دریافت میکنیم یا false. اگر true باشه که به معنای پشتیبانی کردن است و اگر false باشه یعنی مرورگر فعلی از Validity State پشتیبانی نمیکنه.

اینکه بیایم و فقط بودن یا نبودن ویژگی validity رو بررسی کنیم کافی نیست. ما باید مطمئن بشیم که همه موارد مربوط به Validity State بصورت کامل وجود دارند.

پس تابع supported رو کمی تغییر میدیم تا همه موارد رو مورد بررسی قرار بدیم. بصورت زیر:

var supported = function () {
    var input = document.createElement('input');
    return ('validity' in input && 'badInput' in input.validity && 'patternMismatch' in input.validity && 'rangeOverflow' in input.validity && 'rangeUnderflow' in input.validity && 'stepMismatch' in input.validity && 'tooLong' in input.validity && 'tooShort' in input.validity && 'typeMismatch' in input.validity && 'valid' in input.validity && 'valueMissing' in input.validity);
};

مرورگرهایی همانند IE11 و Edge بیشتر این موارد رو دارند ولی بعضی از اونا رو پشتیبانی نمیکنن. به همین دلیل این مرورگرها در این تست رد میشن و false رو بر میگردونن. باید خودمون یچیزی بسازیم که این موارد رو در مرورگرهای این چنینی شبیه سازی کنه.

بررسی اعتبار یا Validity ورودی

کار بعدی که باید انجام بدیم اینه که یک تابع برای بررسی وضعیت اعتبار فیلد ورودی بسازیم و با استفاده از اون یک شئ که شباهت ساختاری با Validity state API داره رو برگشت بدیم.

در ابتدا یک تابع بنام getValidityState میسازیم و یک پارامتر به نام field برای اون در نظر میگیریم.

var getValidityState = function (field) {
    // Run our validity checks...
};

این تابع قرار هست که یک ورودی یا input رو دریافت کنه و یک شئ مثل Validity state API رو شبیه سازی کنه و برگردونه.

مرحله بعدی اینه که تعدادی متغیر رو در ابتدا تعریف کنیم تا دیگه لازم نباشه هر دفعه کارهای تکراری رو انجام بدیم. بصورت زیر:

var getValidityState = function (field) {

    // Variables
    var type = field.getAttribute('type') || field.nodeName.toLowerCase(); // The field type
    var isNum = type === 'number' || type === 'range'; // Is the field numeric
    var length = field.value.length; // The field value length

};

میبینید که 3 متغیر تعریف کردیم:

  • type : نوع فیلد وارد شده رو مشخص میکنه
  • isNum : عددی بودن فیلد رو مشخص میکنه. فیلد number و range عددی هستند
  • length : تعداد کاراکتر مقدار فیلد رو مشخص میکنه

از این متغیر‌ها در قسمتهای بعدی تابع زیاد استفاده میشه. در قسمت بعد با ادامه این موضوع در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

در جلسات بعدی با ادامه موضوع در خدمتتون هستیم.

موفق و پیروز باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !