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



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه گذشته تابع showError رو تکمیل کردیم و ارور مربوط به هر فیلد رو در صورت وجود در زیر اون فیلد نمایش دادیم. همچنین یک استایل قرمز رنگ نیز برای border و متن پیام قرار دادیم تا ظاهر بهتری داشته باشد. در این جلسه میخوایم کدها رو ادامه بدیم و امکانات جدیدی رو به اون اضافه کنیم.

مخفی کردن پیام ارور

زمانی که کاربر به هر دلیلی یک ارور رو در زیر فیلد میبینه، سعی میکنه اون رو برطرف کنه (البته امیدواریم). زمانی که کاربر ارور مورد نظر رو برطرف میکنه، ما باید پیام ارور رو مخفی کنیم. پس یک تابع دیگه بنام removeError رو میسازیم و یک پارامتر بنام field برای اون قرار میدیم. این تابع وظیفش اینه که یک فیلد رو دریافت کنه و ارور مربوط به اون رو حذف کنه. این تابع رو همچنین باید در Event listener فراخوانی کنیم. پس کد کلی بصورت زیر خواهد بود:

میبنید که در خط 1 تابع removeError رو تعریف کردیم و در خط 16 نیز اون رو فراخوانی کردیم. در تابع removeError قصد انجام چنین کارهایی رو داریم:

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
  1. حذف کردن کلاس error از فیلد مورد نظر
  2. حذف کردن role یا نقش aria-describedby از فیلد مورد نظر
  3. مخفی کردن هر پیام visible در Dom

پس کد مربوط به تابع removeError بصورت زیر خواهد بود:

در خط 3 کلاس error رو از فیلد مورد نظر حذف کردیم. در خط 5 ویژگی aria-describedby رو حذف کردیم. در خط 7 id فیلد رو بدست آوردیم و از اون در خط 10 برای پیدا کردن پیام ارور مرتبط با این فیلد استفاده کردیم. چون در بیشتر مواقع امکان داره بیشتر از یک فرم در صفحه وجود داشته باشه و احتمال اینکه id یا name فیلدها با هم برابر باشه نیز وجود داره (این مورد نامعتبر است ولی زیاد دیده شده)، متد querySelector رو برای اون فرمی که فیلد درونش قرار داده مورد استفاده قرار میدیم و در اون فرم به دنبال پیام مورد نظر میگردیم و در کل سند یا document جستجو نمیکنیم. با اینکار اگر id یا name فرمها نیز با هم برابر باشد مشکلی به وجود نمیاد. اگر پیام ارور وجود داشته باشه، خط 13 تا 15 اجرا میشن و به ترتیب متن درون اون رو تهی میکنن و پیام رو بصورت کلی مخفی میکنن.

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

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

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

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

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

یا علی

Source

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

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