اعتبارسنجی Form ها (جلسه 6) : اعتبارسنجی با Javascript - قسمت 2

همونطور که میدونین در جلسه قبل توضیحاتی مقدماتی در مورد اعتبارسنجی با استفاده از Javascript API خدمتتون دادیم و شما رو با ویژگی validity آشنا کردیم و اطلاعات مفیدی که در اختیارمون میزاره رو با هم بررسی کردیم. در این جلسه میخوایم مثالهای عملی رو با هم شروع کنیم.

غیرفعال کردن اعتبارسنجی ذاتی فرمها

بخاطر اینکه ما قصد داریم اعتبارسنجی فرمها رو سفارش سازی کنیم و مطابق با سلیقه خودمون اینکار رو انجام بدیم، باید در ابتدا اعتبارسنجی ذاتی فرمها رو غیرفعال کنیم. این کار به سادگی و با استفاده از اضافه کردن ویژگی novalidate به فرمها انجام میشه. بعد از اضافه کردن این ویژگی به فرم، امکان استفاده از Javascript API وجود داره و فقط مرورگر رو مجبور میکنیم که پیامها و رفتارهای پیش فرض و ذاتی از قبل تعریف شده رو انجام ندهد.

بهترین کار برای اضافه کردن این ویژگی در عمل، استفاده از Javascript است. به این دلیل از Javascript استفاده میکنیم که اگر زمانی اسکریپت ما ارور داشت و یا اصلا لود نشد، اعتبارسنجی ذاتی فرمها سر جای خودش باقی بمونه و مشکلی پیش نیاد. برای اینکه بعد از لود شدن کدهای Javascript بتونیم اعتبارسنجی ذاتی همه فرمها رو غیر فعال کنیم، بصورت زیر عمل میکنیم:

میبینید که در خط اول همه فرمها رو انتخاب کردیم و درون یک حلقه for برای همه اونا ویژگی novalidate رو قرار دادیم. احتمال داره فرمهایی وجود داشته باشند که نخواید اونا رو اعتبارسنجی کنید (مانند فرم جستجو که در بالای همه صفحات وجود دارد). علاوه بر اون بجای اینکه هم فرمها رو هدف قرار بدیم، بهتره که یه کلاس بنام validate به فرمهای مورد نظرمون بدیم و بعد اونا رو در Javascript مورد هدف قرار بدیم. بصورت زیر:

میبینید که در ابتدا همه فرمهایی که کلاس validate دارند رو انتخاب کردیم و درون متغیر forms قرار دادیم. در مرحله بعد و درون حلقه به همه اونا ویژگی novalidate رو اضافه کردیم و مقدارش رو برابر با true قرار دادیم. دموی زیر رو مشاهده کنید: همونطور که مشاهده میکنید دو فرم کاملا یکسان رو قرار دادیم و فقط به فرم اول کلاس validate رو نسبت دادیم. درون Javascript، اعتبارسنجی فرمهایی که این کلاس دارند رو غیرفعال میکنیم. در دموی بالا اعتبارسنجی فرم اول به دلیل وجود کلاس validate، غیرفعال است و زمانی که بر روی Submit کلیک میکنید ارسال میشه (با اینکه ورودی ویژگی required رو دارد). اما فرم دوم کلاس validate رو نداره و زمانی که بر روی Submit کلیک میشه، از ارسال فرم جلوگیری میشه و یک پیام به کاربر نمایش داده میشه.

بررسی اعتبار زمان ترک کردن ورودی توسط کاربر

فرض کنیم قصد داریم هر زمان که کاربر یک فیلد ورودی رو ترک میکنه (یعنی focus از ورودی برداشته میشه)، وضعیت اعتبار ورودی رو بررسی کنیم. برای اینکار از یک رویداد و یک Event listener استفاده میکنیم.

علاوه بر اضافه کردن listener به همه ورودی های فرم، ما از یک تکنیک بنام Event Bubbling استفاده میکنیم که بتونیم به همه رویدادهای از نوع blur گوش بدیم (رویداد blur زمانی که یک المنت تمرکز یا focus خودش رو از دست میده، اتفاق میوفته). کد زیر رو در نظر بگیرید:

میبینید که با استفاده از متد addEventListener، یک listener برای رویداد blur برای document قرار دادیم و بعد از اون یک callback function رو قرار دادیم و این تابع هر زمان که رویداد blur رخ بده، اجرا میشه. در نهایت باید به آرگومان آخر که true قرار دادیم، دقت کنید (همون تکنیک Event Bubbling هستش). اگر از این آرگومان استفاده نکنید، بصورت پیش فرض false خواهد بود و رویدادها در فاز Event Capturing صدا زده میشن. زمانی که true قرار میدیم رویدادها در فاز Event Bubbling صدا زده میشن. تصویر زیر رو ببینید:

همونطور که میبینید المنت button و همه Parent های اون رو قرار دادیم. زمانی که در فاز Capturing یا فاز پیش فرض قرار دادیم و بر روی دکمه کلیک میکنیم، رویداد مورد نظر ابتدا برای المنت html و بعد برای body و ... و در نهایت برای خود دکمه اجرا میشه. اما زمانی که از true استفاده میکنیم و فاز رو به Bubbling تغییر میدیم، این روند برعکس میشه و رویداد در ابتدا برای خود دکمه و بعد از اون به ترتیب برای Parent هاش اجرا میشه. برای مطالعه بیشتر میتونین این لینک رو مطالعه کنید.

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

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

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

یا علی

Source