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

آخرین مطالب

امکانات وب

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

همونطور که اطلاع دارید در جلسه گذشته تابع hasError رو تکمیل کردیم و متناسب با هر حالت، یک ارور قرار دادیم تا ارور و مشکل رو به خوبی به کاربر بفهمونیم. در جلسه قبل متن ارور ها رو در Console چاپ کردیم ولی در این جلسه میخوایم کاری کنیم که ارورها بجای چاپ شدن در Console در زیر همون فیلدی که مشکل داره، نمایش داده بشه.

نمایش متن ارور

همونطور که در جلسه قبل دیدید، به ارورهای موجود با استفاده از تابع hasError دسترسی پیدا کردیم و اونا رو در Console چاپ کردیم. در اینجا میخوایم کاری کنیم که بجای نمایش در Console، ارورها در زیر فیلدها نمایش داده بشن. برای این منظور یک تابع دیگه بنام showError میسازیم و دو پارامتر field و error رو برای اون قرار میدیم. از این تابع در Event Listener خودمون استفاده میکنیم. پس قالب کلی کد بصورت زیر میشه:

var showError = function (field, error) {

// Show the error message...

};

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

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

var error = hasError(event.target);

if (error) {

showError(event.target, error);

}

}, true);

میبینید که تابع مورد نظر رو در خط 1 ساختیم و در انتهای Event Listener در ابتدا چک کردیم که error وجود داره یا خیر و اگر وجود داشت، از تابع showError استفاده میکنیم و event.target و error (خروجی تابع hasError) رو به عنوان آرگومان برای اون ارسال میکنیم. در تابع showError باید کارهای زیر رو انجام بدیم:

یک کلاس به فیلدی که ارور داره اضافه میکنیم تا بتونیم با استفاده از CSS به اون استایل بدیم
اگر یک پیام ارور از قبل وجود داره، باید اون رو با متن جدید به روز رسانی کنیم
در غیر اینصورت باید یک پیام جدید بسازیم و با استفاده از Javascript اون رو در Dom و بعد از فیلد مورد نظر قرار بدیم

همچنین برای اینکه بعدا بتونیم به متن دسترسی داشته باشیم، یک id برای متن ارور در نظر میگیریم که برابر با id اون فیلدی هست که ارور داره. (برای فیلدهایی که id ندارند از ویژگی name بعنوان پشتیبان استفاده میکنیم)

پس تابع showError رو بصورت زیر تغییر میدیم:

var showError = function (field, error) {

field.classList.add('error');

var id = field.id || field.name;

if (!id) return;

var message = field.form.querySelector('.error-message#error-for-' + id );

if (!message) {

message = document.createElement('div');

message.className = 'error-message';

message.id = 'error-for-' + id;

field.parentNode.insertBefore( message, field.nextSibling );

}

message.innerHTML = error;

message.style.display = 'block';

message.style.visibility = 'visible';

};

در خط 3 یک کلاس بنام error به فیلد مورد نظر اضافه کردیم. در خط 5 بررسی شده که فیلد مورد نظر id یا ویژگی name دارد یا خیر. اگر داشته باشه که درون متغیر id ذخیره میشه ولی اگر هیچکدام از این موارد وجود نداشته باشند، if موجود در خط 6 اجرا میشه و return صورت میگیره و از تابع خارج میشیم و کدهای بعد از اون اجرا نمیشن. حالا فرض میکنیم که id یا name وجود داره، پس به خطوط بعدی میریم. در خط 8 بررسی میشه که از قبل پیامی برای اون فیلد وجود داره یا خیر. اگر وجود داره که شرط خط 9 اجرا نمیشه و به خط 16 میریم و نوشته مربوط به message رو به روز رسانی میکنیم. اگر پیام وجود نداشته باشه، در خط 10 تا 13 یک پیام جدید رو رو میسازیم و اون رو بعد از فیلد مورد نظر قرار میدیم. برای اون id متناسب با id گرفته شده از فیلد رو قرار میدیم و یک کلاس بنام error-message رو بهش نسبت میدیم. در خط 18 و 19 نیز المنت div مربوط به پیام رو block و visible میکنیم تا کاربر قادر به دیدن پیام بشه.

برای اینکه به Screen Reader ها و ابزارهای دیگه بفهمونیم که این پیام مربوط به فیلد مورد نظر است، میتونیم از aria-describedby استفاده کنیم. پس کد بالا رو بصورت زیر تغییر میدیم:

var showError = function (field, error) {

field.classList.add('error');

var id = field.id || field.name;

if (!id) return;

var message = field.form.querySelector('.error-message#error-for-' + id );

if (!message) {

message = document.createElement('div');

message.className = 'error-message';

message.id = 'error-for-' + id;

field.parentNode.insertBefore( message, field.nextSibling );

}

field.setAttribute('aria-describedby', 'error-for-' + id);

message.innerHTML = error;

message.style.display = 'block';

message.style.visibility = 'visible';

};

میبینید که در خط 16 ویژگی aria-describedby رو به فیلد مورد نظر اضافه کردیم و مقدار id همون پیام رو برای قرار دادیم. با اینکار به Screen reader ها میگیم که توضیحات این فیلد درون متن مورد نظر قرار داده شده است.

استایل دادن به متن ارور

همونطور که دیدید در کدهای بالا کلاس error و error-message رو به المنتهای مورد نظر اضافه کردیم و حالا میتونیم با استفاده از CSS، استایلهای مورد نظرمون رو به اونا اضافه کنیم. بصورت زیر:

.error {

border-color: red;

}

.error-message {

color: red;

font-style: italic;

}

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

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

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

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

یا علی

Source

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

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

برچسب : اعتبارسنجی,اعتبارسنجی, نویسنده : استخدام کار 7learn بازدید : 327 تاريخ : پنجشنبه 30 شهريور 1396 ساعت: 9:11

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

آخرین مطالب

امکانات وب