تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 9 دقیقه
۲۷ شهریور ۱۳۹۶

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

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);

همونطور که در جلسه پیش هم اشاره شد، یک تابع مجزا رو به این دلیل به وجود آوردیم که کدهای درون Event listener خیلی شلوغ نشن و بهتر بتونیم کدها رو مدیریت کنیم. خب حالا وارد جزئیات مربوط به تابع hasError میشیم و با استفاده از اون وجود یا عدم وجود ارور برای ورودی یا field مورد نظر رو بررسی میکنیم. در ابتدا میخوایم کاری کنیم که اگر ورودی مورد نظر جز یکی از دسته‌های زیر قرار دارد، از اون صرف نظر بشه و اعتبارسنجی برای اون بررسی نشه:

  • ورودی‌های غیر فعال یا Disable
  • ورودی از نوع file
  • ورودی از نوع reset
  • دکمه Submit
  • همه دکمه یا Button ها

برای اینکار بصورت زیر عمل میکنیم:

var hasError = function (field) {

    if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;

    var validity = field.validity;

};

میبینید که در خط سه بررسی میکنیم که ورودی مورد نظر جزء دسته‌های ذکر شده قرار دارد یا خیر. اگر ورودی جزء اونا باشه، پس return اجرا میشه و از تابع خارج میشیم و در غیر اینصورت کدهای بعد از if اجرا میشه و وضعیت اعتبار یا validity ورودی مورد نظر درون متغیر validity ذخیره میشه.

خب حالا با توجه به validity، اگر ارور یا مشکلی وجود نداشته باشد، ما null رو return میکنیم. اما اگر یک مشکل وجود داشته باشه ما همه حالات و ویژگی‌های مربوط به validity رو تا پیدا کردن مشکلات بررسی میکنیم.

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

var hasError = function (field) {

    // Don't validate submits, buttons, file and reset inputs, and disabled fields
    if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;

    // Get validity
    var validity = field.validity;

    // If valid, return null
    if (validity.valid) return;

    // If field is required and empty
    if (validity.valueMissing) return 'Please fill out this field.';

    // If not the right type
    if (validity.typeMismatch) return 'Please use the correct input type.';

    // If too short
    if (validity.tooShort) return 'Please lengthen this text.';

    // If too long
    if (validity.tooLong) return 'Please shorten this text.';

    // If number input isn't a number
    if (validity.badInput) return 'Please enter a number.';

    // If a number value doesn't match the step interval
    if (validity.stepMismatch) return 'Please select a valid value.';

    // If a number field is over the max
    if (validity.rangeOverflow) return 'Please select a smaller value.';

    // If a number field is below the min
    if (validity.rangeUnderflow) return 'Please select a larger value.';

    // If pattern doesn't match
    if (validity.patternMismatch) return 'Please match the requested format.';

    // If all else fails, return a generic catchall error
    return 'The value you entered for this field is invalid.';

};

میبینید که تمامی حالات رو نظر گرفتیم و برای هر کدام رشته ای متناسب رو برگشت دادیم. این کد برای شروع خوب است ولی میتونیم مقداری دیگه بر روی اون کار کنیم تا اطلاعات دقیقتری رو در اختیار کاربران قرار بدیم. مثلا برای typeMismatch میتونیم بررسی کنیم که مربوط به ورودی از نوع url هست یا email و متن مربوط به هر کدام رو سفارش سازی شده و مرتبط قرار بدیم. پس کد مربوط به typeMismatch بصورت زیر تغییر داده میشه:

if (validity.typeMismatch) {

    // Email
    if (field.type === 'email') return 'Please enter an email address.';

    // URL
    if (field.type === 'url') return 'Please enter a URL.';

}

میبینید که نوع ورودی در ابتدا بررسی میشه و متناسب با اون متن ارور return میشه.

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

// If too short
if (validity.tooShort) return 'Please lengthen this text to ' + field.getAttribute('minLength') + ' characters or more. You are currently using ' + field.value.length + ' characters.';

// If too long
if (validity.tooLong) return 'Please short this text to no more than ' + field.getAttribute('maxLength') + ' characters. You are currently using ' + field.value.length + ' characters.';

میبینید که برای هر کدام یک متن مرتبط قرار گرفته و با استفاده از متد getAttribute به ویژگی minLength و maxLength دسترسی پیدا کردیم و اونا رو به کاربر نمایش دادیم. با استفاده از متد length هم تعداد کاراکتر فعلی وارد شده توسط کاربر رو به اون نمایش دادیم.

مورد بعدی مربوط به ورودی‌های از نوع عددی هست و میتونیم زمانی که عدد وارد شده توسط کاربر از حداقل یا حداکثر بیشتر است، مقدار حداکثر و حداقل رو درون متن ارور به کاربر نمایش بدیم تا عدد مناسب رو وارد کنه. بصورت زیر:

// If a number field is over the max
if (validity.rangeOverflow) return 'Please select a value that is no more than ' + field.getAttribute('max') + '.';

// If a number field is below the min
if (validity.rangeUnderflow) return 'Please select a value that is no less than ' + field.getAttribute('min') + '.';

میبینید که با استفاده از متد getAttribute تونستیم به ویژگی‌های min و max دسترسی پیدا کنیم.

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

// If pattern doesn't match
if (validity.patternMismatch) {

    // If pattern info is included, return custom error
    if (field.hasAttribute('title')) return field.getAttribute('title');

    // Otherwise, generic error
    return 'Please match the requested format.';

}

میبینید که در ابتدا وجود یا عدم وجود ویژگی title بررسی شده و در صورت وجود اون رو برگشت میدیم. در غیر اینصورت همون پیام کلی مربوط به رعایت نشدن الگو رو به کاربر نمایش میدیم.

خب اگر بخوایم همه کدهای بالا که مربوط به تابع hasError هستند رو در یکجا داشته باشیم، بصورت زیر خواهد بود:

// Validate the field
var hasError = function (field) {

    // Don't validate submits, buttons, file and reset inputs, and disabled fields
    if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;

    // Get validity
    var validity = field.validity;

    // If valid, return null
    if (validity.valid) return;

    // If field is required and empty
    if (validity.valueMissing) return 'Please fill out this field.';

    // If not the right type
    if (validity.typeMismatch) {

        // Email
        if (field.type === 'email') return 'Please enter an email address.';

        // URL
        if (field.type === 'url') return 'Please enter a URL.';

    }

    // If too short
    if (validity.tooShort) return 'Please lengthen this text to ' + field.getAttribute('minLength') + ' characters or more. You are currently using ' + field.value.length + ' characters.';

    // If too long
    if (validity.tooLong) return 'Please shorten this text to no more than ' + field.getAttribute('maxLength') + ' characters. You are currently using ' + field.value.length + ' characters.';

    // If number input isn't a number
    if (validity.badInput) return 'Please enter a number.';

    // If a number value doesn't match the step interval
    if (validity.stepMismatch) return 'Please select a valid value.';

    // If a number field is over the max
    if (validity.rangeOverflow) return 'Please select a value that is no more than ' + field.getAttribute('max') + '.';

    // If a number field is below the min
    if (validity.rangeUnderflow) return 'Please select a value that is no less than ' + field.getAttribute('min') + '.';

    // If pattern doesn't match
    if (validity.patternMismatch) {

        // If pattern info is included, return custom error
        if (field.hasAttribute('title')) return field.getAttribute('title');

        // Otherwise, generic error
        return 'Please match the requested format.';

    }

    // If all else fails, return a generic catchall error
    return 'The value you entered for this field is invalid.';

};

دموی خروجی اون نیز بصورت زیر هست که میتونین اون رو تست کنید: شما میتونین Console درون Inspector رو باز کنید و ورودی‌های بالا رو تست کنید. هر زمان که رویداد Blur برای ورودی‌ها اتفاق میوفته، در صورت وجود Error در Console نمایش داده میشه. بهمین راحتی.

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.