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

- visibility ۰ mode_comment

همونطور که میدونین در جلسه قبل توضیحاتی در مورد غیر فعال کردن اعتبارسنجی ذاتی فرمها با استفاده از ویژگی novalidate دادیم. همچنین شما رو با رویداد blur و تکنیک Event Bubbling آشنا کردیم. در این جلسه میخوایم این موضوع رو ادامه بدیم.

همونطور که خاطرتون هست در جلسه قبل از کد زیر استفاده کردیم:

در کد بالا، رویداد blur برای همه المنتهای صفحه انجام میشه. ما فقط قصد داریم برای ورودی هایی که درون فرم با کلاس validate هستند، این رویداد انجام بشه و اون رو بررسی کنیم. برای اینکار کد زیر رو اضافه میکنیم:

برای اینکه رویداد blur رو فقط برای اون ورودی هایی که درون فرم با کلاس validate قرار گرفته اند، نسبت بدیم خط 3 رو قرار داده ایم. با استفاده از event.target به اون المنتی که رویداد blur براش اتفاق میوفته دسترسی خواهیم داشت. با استفاده از متد form میتونیم به فرمی که این ورودی درونش قرار داره دسترسی پیدا کنیم و با استفاده از متد classList.contain میتونیم بررسی کنیم که فرم مورد نظر کلاس validate داره یا خیر. اگر کلاس validate نداشته باشه خروجی false میشه و چون قبل از شرط یک ! قرار داده شده، پس به true تبدیل میشه و در نتیجه دستورات درون if اجرا میشن. درون if فقط یک return قرار دادیم و با اینکار به کلی از تابع خارج میشیم و کدهای بعد از اون اجرا نمیشن. فرض میکنیم که فرم مورد نظر کلاس validate رو داشته باشه و در نتیجه دستورات درون if انجام نمیشه و کدهای بعد از اون اجرا میشن. میبینید که مقدار validity ورودی مورد نظر رو در Console چاپ کردیم. دموی زیر رو ببینید:

همونطور که میبینید یک فرم با تعدادی ورودی قرار داده شده است. در ابتدا Inspector مرورگر رو باز کنید و وارد تب console بشید و بعد از اون درون فیلدهای فرم کلیک کنید و بعد در جای دیگه کلیک کنید تا فوکوس و تمرکز از اون ورودی برداشته بشه. هر بار که رویداد blur برای یک ورودی که در شرایط بالا صدق میکنه اجرا میشه، یک شئ از نوع validityState در Console چاپ میشه و وضعیت اعتبار فعلی ورودی مورد نظر رو نمایش میده:

میبینید که در حالت بالا، ورودی مورد نظر معتبر یا valid نیست.

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

میبینید که یک تابع بنام hasError در خط 1 تعریف کردیم و این تابع یک field یا ورودی رو دریافت میکنه و وجود یا عدم وجود ارور رو برای اون بررسی میکنه. درون Event Listener هم (خط 9) برای هر event.target این تابع رو فراخوانی میکنیم. فعلا تا همینجا رو نگه دارید و در جلسه بعد اون رو ادامه میدیم.

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

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

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

یا علی

Source

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

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