اعتبارسنجی Form ها (جلسه 4) : اعتبارسنجی با HTML - قسمت 4

تعرفه تبلیغات در سایت
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس

آرشیو مطالب

جستجوگر

امکانات وب

پر مخاطب ها

برچسب ها

همونطور که اطلاع دارید در جلسه قبل توضیحاتی در مورد اعتبارسنجی اعداد، ایمیل و URL با استفاده از HTML بهتون دادیم و شما رو با ویژگی های موجود در این زمینه آشنا کردیم. در این جلسه میخوایم با ادامه توضیحات دیگر ویژگی های در خدمتتون باشیم.

اعتبارسنجی تاریخ

تعدادی کمی از input ها هستند که علاوه بر اعتبارسنجی تاریخها، یک انتخاب کننده تاریخ رو در اختیارتون میزارن که به راحتی میتونین تاریخ مورد نظر خودتون رو انتخاب کنید. خبر بد اینه که فقط مرورگرهای Chrome و Edge و Safari مربوط به موبایل این امکانات رو پیاده سازی کردند و بقیه مرورگرها ورودی از نوع تاریخ رو بصورت یک input ساده نمایش میدن. این ویژگی در آینده نزدیک به Firefox نیز اضافه خواهد شد.

مانند همیشه ما از ویژگی pattern برای تحت پوشش قرار دادن مرورگرهای قدیمی استفاده کرده ایم. ورودی از نوع input برای تاریخ از نوع روز/ماه/سال است. کد زیر رو در نظر بگیرید:

در مرورگرهایی که از ورودی از نوع date پشتیبانی میکنن، تاریخ انتخابی با فرمت MM/DD/YYYY نمایش داده میشه (البته کاربران میتونن با تغییر تاریخ در تنظیمات، فرمت رو تغییر بدهند). اما مقدار در واقع در فرمت YYYY-MM-DD هستش. همونطور که اطلاع دارید، Y و M و D به ترتیب نشانگر سال، ماه و روز هستند.

شما باید برای مرورگرهایی که از این ورودی پشتیبانی نمیکنن، یک متن راهنما قرار بدین و فرمت وارد کردن تاریخ صحیح رو بهشون نمایش بدین. مثلا میتونین بگید: "لطفا از فرمت YYYY-MM-DD برای این ورودی استفاده کنید". دموی زیر رو در نظر بگیرید: اگر کد بالا رو در مرورگرهایی که از ورودی date پشتیبانی نمیکنند، مشاهده کنید هیچ مشکلی وجود نداره و کارا به خوبی پیش میره. اما اگر کد بالا رو در مرورگرهایی مثل Chrome و Safari موبایل مشاهده کنید، چون این مرورگرها از این ورودی پشتیبانی میکنند، فرمت پیاده سازی شده توسط خودشون رو به کاربر نمایش میدن. پس خروجی در مرورگرهایی که پشتیبانی میکنن، بصورت زیر خواهد بود:

همونطور که میبینید دو فرمت در خروجی به کاربر نمایش داده میشه و کاربر گیج میشه که کدام یکی از اونا درست است. فرمت 1 همون راهنمایی هست که ما قرار دادیم و فرمت 2، فرمتی هست که خود مرورگر بصورت ذاتی قرار داده. برای حل مشکل میتونیم یه تست کوچک رو انجام بدیم.

برای اینکه این مشکل رو برطرف کنیم، در ابتدا مرورگر مورد نظر را چک و بررسی میکنیم که ورودی از نوع date را پشتیبانی میکند یا خیر و با توجه به نتیجه تست، خروجی رو طوری نمایش میدیم که کاربران گیج نشن. در ابتدا کدهای HTML زیر رو قرار میدیم:

میبینید که فرمت راهنمایی که برای مرورگرهایی که پشتیبانی نمیکنن را درون یک span قرار دادیم و یک کلاس description-date رو بهش نسبت دادیم. حالا برای اینکه متوجه بشیم که مرورگر فعلی از ورودی date پشتیبانی میکنه یا خیر، کد Javascript زیر رو قرار میدیم:

میبینید که یک تابع رو تعریف کردیم و بعد از اون با از دستور if خروجی اون رو بررسی کردیم. اگر true باشه پس مرورگر از ورودی date پشتیبانی میکنه و ما کلاس supports-date رو به تگ html اضافه میکنیم. بعد از اون درون CSS کد زیر رو قرار میدیم:

میبینید که گفتیم اگر این کلاس وجود داشت، این span مخفی بشه. پس به همین راحتی مشکل را حل کردیم و این راهنما در مرورگرهایی که ورودی date رو پشتیبانی میکنن، دیگه نمایش داده نمیشه. خروجی بصورت زیر میشه: میبینید که مشکل برطرف شده است. به همین راحتی.

دیگر ورودی های از نوع تاریخ:

ورودی از نوع time به کاربر این امکان رو میده که داده از نوع زمان و ساعت رو وارد کنه و همینطور ورودی از نوع month به اونا اجازه میده که ماه/سال رو انتخاب بکنند. کدها بصورت زیر خواهند بود:

میبینید که مجددا از ویژگی pattern برای پشتیبانی مرورگرهای قدیمی استفاده کردیم.

ورودی time فرمت 12 ساعته am و pm (همون قبل از ظهر و بعد از ظهر خودمون) رو داره ولی در واقع مقدار اون 24 ساعته هست. فرمت ورودی month در مرورگرهای تحت پشتیبانی بصورت May 2017 نمایش داده میشه ولی در واقع مقدار value اون فرمت YYYY-MM را دارد.

خب در اینجا نکات مربوط به اعتبارسنجی با HTML به پایان میرسه. تعدادی نکته هست که بهتره اونا رو در نظر داشته باشید.

یک کلاس کاذب بنام :invalid وجود داره که میتونین با استفاده از اون به ورودی هایی که نامعتبر هستند، استایل مورد نظرتون رو اعمال کنید. شما نمیتونین به پیام alert مربوط به اعتبارسنجی استایل خاصی رو بدید.

دو تحقیق توسط Christian Holst و Luke Wroblewski در این زمینه انجام گرفته و میتونیم از نتایج اونا استفاده کنیم. بهترین تجربه کاربری برای اعتبارسنجی فرمها اینه که زمانی که کاربر اطلاعات رو وارد کرد و ورودی مورد نظر رو ترک کرد، ارور در صورت وجود به اون نمایش داده بشه و تا زمانی که اون رو برطرف نکنه، بصورت دائم نمایش داده بشه.

در جلسات بعدی اعتبارسنجی توسط Javascript بدون نیاز به هیچ ابزاری رو بررسی میکنیم.

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

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

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

یا علی

Source

  • مطالب مرتبط
  • ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 22) : تبدیل Inspector به ویرایشگر قدرتمند
  • آموزش ویژگی های ECMAScript 6 (جلسه 21) : آموزش Destructuring در آرایه ها
  • اعتبارسنجی Form ها (جلسه 10) : اعتبارسنجی با Javascript - قسمت 6
  • ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 21) : آموزش Code Coverage
  • اعتبارسنجی Form ها (جلسه 9) : اعتبارسنجی با Javascript - قسمت 5
  • آموزش ویژگی های ECMAScript 6 (جلسه 20) : آموزش Destructuring در اشیاء
  • نویسنده : استخدام کار بازدید : 12 تاريخ : سه شنبه 21 شهريور 1396 ساعت: 2:12

    آخرین مطالب

    خبرنامه

    عضویت

    نام کاربري :
    رمز عبور :