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

آخرین مطالب

امکانات وب

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

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

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

document.addEventListener('blur', function (event) {

// Do something on blur...

}, true);

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

document.addEventListener('blur', function (event) {

if (!event.target.form.classList.contains('validate')) return;

var error = event.target.validity;

console.log(error);

}, true);

برای اینکه رویداد 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 در اختیارمون قرار میده استفاده کنیم. بدلیل اینکه ما نیاز داریم که هر ویژگی رو بصورت جداگانه بررسی کنیم، پس کدهای ما طولانی میشن و بهتره که یک تابع جداگانه و مخصوص برای بررسی اعتبار ورودی های مورد نظر بسازیم. برای اینکار بصورت زیر عمل میکنیم:

var hasError = function (field) {

// Get the error

};

document.addEventListner('blur', function (event) {

if (!event.target.form.classList.contains('validate')) return;

var error = hasError(event.target);

}, true);

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

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

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

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

یا علی

Source

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : اعتبارسنجی,اعتبارسنجی, نویسنده : استخدام کار 7learn بازدید : 335 تاريخ : چهارشنبه 29 شهريور 1396 ساعت: 18:22

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

آخرین مطالب

امکانات وب

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

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه