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

آخرین مطالب

امکانات وب

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

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

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

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

var removeError = function (field) {

// Remove the error message...

};

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

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

var error = event.target.validity;

if (error) {

showError(event.target, error);

return;

}

removeError(event.target);

}, true);

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

حذف کردن کلاس error از فیلد مورد نظر
حذف کردن role یا نقش aria-describedby از فیلد مورد نظر
مخفی کردن هر پیام visible در Dom

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

var removeError = function (field) {

field.classList.remove('error');

field.removeAttribute('aria-describedby');

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

if (!id) return;

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

if (!message) return;

message.innerHTML = '';

message.style.display = 'none';

message.style.visibility = 'hidden';

};

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

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

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

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

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

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

یا علی

Source

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

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

برچسب : اعتبارسنجی,اعتبارسنجی, نویسنده : استخدام کار 7learn بازدید : 366 تاريخ : جمعه 31 شهريور 1396 ساعت: 6:54

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

آخرین مطالب

امکانات وب

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

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

آرشیو مطالب

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

لینک دوستان

خبرنامه