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



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه گذشته تابع removeError رو تکمیل کردیم و ارور مربوط به هر فیلد رو در صورت معتبر بودن حذف و مخفی کردیم. در این جلسه میخوایم کدها رو ادامه بدیم و امکانات جدیدی رو به اون اضافه کنیم. همونطور که یادتون هست گفتیم که اگر فیلد مورد نظر radio یا checkbox باشه، باید روش قرار دادن پیام ارور در Dom رو براشون تغییر بدیم، چون ساختار اونا با input های دیگه متفاوت است.

همونطور که میدونین radio یا checkbox یک فیلد مربوط به label داره که اون رو توصیف میکنه. این فیلد معمولا بعد از radio یا checkbox قرار میگیره یا کلا اون رو احاطه میکنه. به علاوه اگر مثلا اون radio جزئی از یک گروه باشه، ما میخوایم به جای اینکه ارور رو بعد از خود radio نمایش بدیم، اون رو بعد از کل گروه مربوط به اون قرار بدیم. تصویر زیر رو در نظر بگیرید:

همونطور که میبینید در قسمت بالای تصویر، یک نمونه بد از قرارگیری ارور رو نمایش دادیم و اون رو بعد از خود radio قرار دادیم. در قسمت پایین تصویر، یک نمونه خوب از قرارگیری ارور رو نمایش دادیم و ارور مربوطه بعد از radio و label مربوط به اون نمایش داده شده است. برای اینکه تنظیمات مربوط به radio و checkbox رو درست کنیم، باید تغییراتی رو در توابع showError و removeError به وجود بیاریم که در ادامه اونا رو بررسی میکنیم. در تابع showError باید بررسی کنیم که نوع فیلد مورد نظر، radio هست یا خیر و آیا ویژگی name داره یا نه (با داشتن name متوجه میشیم که درون یک گروه قرار دارد). در نهایت نیز field رو به آخرین radio موجود در گروه تغییر میدیم تا بتونیم ارور رو بعد از اون نمایش بدیم. پس تابع showError بصورت زیر خواهد بود:

در خط 5 بررسی شده که radio هست و ویژگی name دارد یا خیر. بعد از اون با استفاده از متد getElementByName، تمام فیلدهایی که در گروه قرار دارند رو انتخاب کردیم. بعد از اون به تمام radio هایی که فقط درون همون فرم قرار دارند، کلاس error رو اضافه میکنیم.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

زمانی که بخوایم ارور مورد نظر رو در Dom تزریق کرده و نمایش بدیم، در ابتدا باید بررسی کنیم که فیلد مورد نظر radio یا checkbox هست یا خیر. اگر این شرط صدق کنه، ما باید بجای نمایش دادن ارور بعد از خود فیلد، ارور رو بعد از label مربوط به اون فیلد قرار بدیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که یک سری کدهای جدید به کدهای جلسات قبلی اضافه کردیم و قابلیت مربوط به radio و checkbox ها رو فراهم کردیم. همانند قبل برای حذف کردن ارور در زمان معتبر بودن ارور، باید تغییراتی رو نیز در تابع removeError به وجود بیاریم. بصورت زیر:

میبینید که همانند قبل در ابتدا از radio بودن اون اطمینان حاصل کردیم و کلاس error رو از radio های مربوط به این فرم حذف کردیم. تا اینجای کار خروجی بصورت زیر خواهد بود: میبینید زمانی که اگر همون اول که فیلدها خالی هستند، بر روی دکمه Submit کلیک میکنید ارورها نمایش داده میشن. ارور مربوط به رادیو بصورت زیر خواهد بود:

میبینید که ارور بعد از همه رادیوها قرار داده شده است.

بررسی کل فیلدها در زمان Submit

زمانی که کاربر بر روی دکمه Submit کلیک میکنه، ما باید تمام فیلدها رو بررسی کنیم و پیام ارور در زیر اون فیلدهایی که معتبر نیستند قرار بدیم. به علاوه ما باید focus رو به اولین فیلدی که ارور درونش وجود داره ببریم تا کاربر به سرعت بتونه مشکلات مربوط به فیلدها رو برطرف کنه. برای اینکار یک listener برای رویداد submit میسازیم. بصورت زیر:

کدهای درون تابع، زمانی که رویداد submit رخ بده، اجرا میشن. درون تابع بالا در ابتدا بررسی میکنیم که فرم مورد نظر، کلاس validate داره یا خیر. اگر این کلاس رو داشته باشه پس همه فیلدهای اون رو از لحاظ اعتبار بررسی میکنیم. اگر اروری وجود داشته باشد، اولین ارور رو در یک متغیر ذخیره میکنیم تا بعدا که کار مربوط به اعتبارسنجی به پایان رسید، فوکوس رو برای اون فیلد قرار بدیم. اگر هم هیچ اروری وجود نداشت، فرم بصورت نرمال Submit میشه. پس کدها بصورت زیر میشن:

میبینید که اگر اروری وجود داشته باشه، اولین فیلد ارور دار رو در متغیر hasErrors ذخیره میکنیم و از Submit شدن فرم با متد preventDefault جلوگیری کرده و فوکوس رو به اون فیلد تغییر میدیم تا کاربر اون مشکل رو برطرف کنه. پس خروجی بصورت کامل بصورت زیر خواهد بود: میبینید زمانی که بر روی Submit کلیک میشه، اون فیلدهایی که ارور دارن نمایش داده میشن و فوکوس به اولین فیلد ارور داره تغییر میکنه و اگر اروری هم وجود نداشته باشه، فرم Submit میشه.

خب در اینجا مطالب مربوط به اعتبارسنجی با استفاده از Javascript به پایان میرسه. اگر میخواید از کل این کدهایی که تا بحال گفتیم بصورت راحت و یک پلاگین استفاده کنید، میتونین از این لینک استفاده کنید. نویسنده این مطلب یک پلاگین با استفاده از این کدها به وجود آورده که میتونین به راحتی از اون برای اعتبارسنجی فرمها مورد استفاده قرار بدین.

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

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

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

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.