آموزش اعتبارسنجی HTML5 توسط اتریبیوت Pattern

آموزش اعتبارسنجی HTML5 توسط اتریبیوت Pattern

HTML5 Form Validation With the "pattern" Attribute

آموزش اعتبارسنجی HTML5

 

در این مقاله قصد داریم نحوه اعتبارسنجی فرم های HTML5 را توسط اتریبیوت pattern بررسی کنیم.

 

 »»» بخش اول ««« 

مفهوم اعتبارسنجی و نحوه تعریف اتریبیوت Pattern

 

اعتبارسنجی (Validation) چیست؟

اعتبارسنجی فرم های یک وب سایت به اندازه قابلیت استفاده (Usability) دارای اهمیت می باشد. در فرآیند اعتبارسنجی، بررسی می شود که آیا ورودی کاربر در input های فرم معتبر (Valid) هستند یا خیر. بعنوان مثال، اگر فیلد موردنظر ما ایمیل است، باید بررسی شود که یک آدرس ایمیل معتبر وارد شود. بدین صورت که کاراکتر اول باید حتما یک عدد یا یک حرف رشته ای باشد و بدنبال آن علامت @ بیاید و در انتها با نام دامنه (Domain Name) خاتمه یابد. مانند contact@Mohtava.info

اعتبارسنجی input فرم در HTML5:

در HTML5 قابلیت های جدیدی اضافه شده است که یکی از مهمترین آنها، امکان اعتبارسنجی INPUT های فرم توسط تعریف نوع فیلد مانند tel و email و url می باشد. وقتی که ورودی هر یک از input های فرم با فرمت موردنظر همخوانی نداشته باشد، کاربر پس از submit فرم، با پیامی مشابه تصویر زیر مواجه می شود (و فرم ارسال نخواهد شد):

 

اعتبارسنجی فیلد ایمیل email

 

و اما اگر فیلدی از فرم ما بصورت پیش فرض در اعتبارسنجی HTML5 تعریف نشده باشد (مانند ZIP Code و یا Username) باید چکار کنیم؟ برای اعتبارسنجی آنها باید چکاری انجام دهیم؟ اینجا جایی است که اتریبیوت pattern وارد میدان می شود!

 

نحوه استفاده از اتریبیوت Pattern در HTML5:

 اتریبیوت pattern تنها در المان های input فرم قابل استفاده است و در صورتی که فیلد موردنظر ما در هیچیک از فرمت های پیش فرض استاندارد HTML5 تعریف نشده باشد، باید فرمت موردنظر خود را توسط Regular Expression و یا به اختصار RegEx تعریف کنید. مانند validation های پیش فرض HTML5 اگر ورودی کاربر با فرمت تعریف شده شما همخوانی نداشته باشد، فرم SUBMIT نخواهد شد و کاربر پیام خطایی مانند تصویر فوق مشاهده خواهد کرد.

اعتبارسنجی فیلد نام کاربری:

بعنوان مثال فرض کنید می خواهیم فیلد نام کاربری (Username) را اعتبارسنجی کنیم. مسلما نوع (type) فیلد بهتر است text باشد. اما باید در اتریبیوت pattern فرمت سفارشی خود را تعریف کنیم. ابتدا کد زیر را در نظر بگیرید:

<form action="somefile.php">

    <input type="text" name="username" placeholder="Username">

</form>

در این مثال، ما می خواهیم ورودی کاربر برای فیلد نام کاربری (Username) شامل حروف بزرگ (Capital) نباشد و می تواند شامل حروف کوچک (lowercase) و اعداد و کاراکترهای خاص باشد. علاوه بر این، نام کاربری نمی تواند طولی بیشتر از ۱۵ کاراکتر داشته باشد. در اتریبیوت pattern این فرمت را بصورت [a-z]{1,15} تعریف می کنیم. مانند کد زیر، pattern را برای input نام کاربری تعریف خواهیم کرد:

<form action="somefile.php">

    <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">

</form>

در تصویر زیر مشاهده می کنید که در صورت ورود حروف بزرگ (Uppercase)، پیامی بصورت کلی به شکل "Please match the requested format" به کاربر نمایش داده شده است. مسلما این پیام نمی تواند به کاربر برای ورود یک نام کاربری معتبر (Valid) کمکی کند.

 

نمایش پیغام مناسب به کاربر

 

و این قضیه از لحاظ تجربه کاربری (UX) مشکل دارد.

در بخش دوم، نحوه سفارشی سازی پیغام پیش فرض اعتبارسنجی را آموزش خواهیم داد.

 

 »»» بخش دوم ««« 

سفارشی سازی پیام اعتبارسنجی پیش فرض html5

 

در بخش قبل، اعتبارسنجی در html5 را معرفی کردیم و نحوه استفاده از اتریبیوت pattern را بیان کردیم. در این بخش قصد داریم سفارشی سازی پیام اعتبارسنجی پیش فرض html5 را آموزش دهیم.

 

شخصی سازی پیغام اعتبارسنجی در HTML5:

خوشبختانه روش هایی برای شخصی سازی پیام خطای اعتبارسنجی وجود دارد که یکی از ساده ترین آنها، استفاده از اتریبیوت title برای input نام کاربری می باشد. کد زیر را در نظر بگیرید:

<form action="somefile.php">

    <input

        type="text"

        name="username"

        placeholder="Username"

        pattern="[a-z]{1,15}"

        title="Username should only contain lowercase letters. e.g. john">

</form>

و اکنون عنوان (title) تعریف شده بعد از پیام پیش فرض HTML5 نمایش داده می شود. مطابق تصویر زیر:

 

سفارشی سازی پیام اعتبارسنجی پیش فرض HTML5

 

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

 

جایگزینی پیام پیش فرض اعتبارسنجی:

اکنون نوبت آنست که پیام پیش فرض "Please match the requested format" را با پیام دلخواه خود جایگزین کنیم. برای انجام اینکار، نیاز به کمی نوشتن کد جاوا اسکریپت داریم. ابتدا در کد زیر، یک id به input موردنظر داده ایم تا بتوانیم براحتی این المان را در جاوا-اسکریپت انتخاب (select) کنیم.

<form action="somefile.php">

    <input

        type="text"

        name="username"

        placeholder="Username"

        pattern="[a-z]{1,15}"

        id="username">

</form>

اکنون می توانیم المان input را توسط کدهای جاوااسکریپت انتخاب کرده و داخل متغیری بریزیم:

var input = document.getElementById('username');

تعریف رویداد oninvalid:

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

input.oninvalid = function(event) {

    event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');

}

رویداد oninvalid از یک آبجکت event ارث بری می کند که دارای property های مختلفی می باشد مانند target و validationMessage که در مثال بالا، توسط متد setCustomValidity آنرا override کرده ایم.

اکنون ما قادر خواهیم بود پیام دلخواه خود را مطابق تصویر زیر به کاربر نمایش دهیم:

 

پیام دلخواه برای اعتبارسنجی HTML5

 

در بخش سوم، نحوه سفارشی سازی ظاهر پبام نمایشی به کاربر در هنگام اعتبارسنجی HTML5 را آموزش خواهیم داد.

 

 »»» بخش سوم ««« 

نحوه استایل‌دهی به INPUT و پیام پیش‌فرض اعتبارسنجی آن

 

در بخش قبل، نحوه سفارشی سازی پیام پیش فرض اعتبارسنجی html5 را بررسی کردیم. در این بخش چگونگی استایل دهی به input HTML5 و همچنین استایل دهی به پیام پیش فرض اعتبارسنجی را خواهیم کفت.

 

استایل دهی به input HTML5:

به منظور استایل دادن به پیام های خطای مربوط به اعتبارسنجی فرم های HTML5 و نیز خود input ها، خوشبختانه CSS3 کلاس های سودو (pseudo class) هایی برای معتبر و یا نامعتبر بودن ورودی کاربر در نظر گرفته است. توسط دو کلاس :valid و :invalid می توان به input موردنظر استایل مربوطه را اعمال کرد. کد زیر را در نظر بگیرید:

input:invalid {

    border-color: red;

}

input,

input:valid {

    border-color: #ccc;

}

استفاده از pseudo-class

مواردی که در هنگام استفاده از pseudo-class ها باید در نظر داشته باشیم به شرح زیر است:

  • بطور پیش فرض، کلاس :valid به input های خالی نیز اعمال می شود یعنی ورودی خالی بعنوان مقداری معتبر (Valid) در نظر گرفته می شود. مگر آنکه شما پر کردن آن فیلد را توسط تعریف اتریبیوت required اجباری کنید.

در اینصورت اگر کاربر آن فیلد را خالی رها کند کلاس :invalid روی آن input اعمال می شود و با توجه به کد فوق، رنگ حاشیه (border) قرمز می شود.

  • کلاس های valid و invalid بصورت آنی و فوری بر روی input ها اعمال می شود. بنابراین دستکاری زیاد استایل های آن باعث سردرگمی کاربران خواهد شد.

 

استایل دهی به پیام خطای اعتبارسنجی:

پیام خطایی که بهنگام نامعتبر بودن ورودی کاربر، بصورت پاپ آپ (popup) نمایش داده می شود، در مرورگرهای مختلف به اشکال مختلف نمایش داده می شود که ممکن است با طراحی UI وب سایت شما ناسازگاری داشته باشد. به تصویر زیر دقت کنید:

 

استایل دهی به پیام خطای اعتبارسنجی

 

گوگل کروم اجازه دستکاری و استایل دهی به پاپ آپ اعتبارسنجی HTML5 را نمی دهد. تنها راهی که باقی می ماند، نوشتن مجدد این پاپ آپ (POPUP) توسط جاوااسکریپت می باشد. برای اینکار بصورت زیر عمل کنید:

 

سفارشی سازی پیشرفته اعتبارسنجی HTML5:

در این بخش می خواهیم پیامی که در صورت نامعتبر (invalid) بودن ورودی، بصورت پاپ آپ (popup) به کاربر نمایش داده می شود را سفارشی سازی کنیم. در ابتدا نیاز است بصورت زیر، دو المان input موردنظر و فرم را انتخاب (select) کنیم:

var input = document.getElementById('username');

var form  = document.getElementById('form');

سپس باید المانی را ایجاد کنیم که دربرگیرنده پیام سفارشی ما باشد:

    var elem = document.createElement('div');

    elem.id = 'notify';

    elem.style.display = 'none';

    form.appendChild(elem);

در کد فوق، یک div با id برابر notify تعریف کرده ایم و آن را با تعریف display:none پنهان کردیم. در نهایت، این div را به انتهای فرم اضافه (append) کرده ایم.

 

کار کردن با رویدادها (Working with events):

در این مثال ما با دو رویداد (event) سروکار داریم. اولی رویداد invalid است که در صورت نامعتبر بودن ورودی کاربر فراخوانی می شود

رویداد invalid:

این رویداد را بصورت زیر تعریف کنید:

input.addEventListener('invalid', function(event){

    event.preventDefault();

    if ( ! event.target.validity.valid ) {

        elem.textContent   = 'Username should only contain lowercase letters e.g. john';

        elem.className     = 'error';

        elem.style.display = 'block';

        input.className    = 'invalid animated shake';

    }

});

توضیح: در متد فوق، ابتدا با تعریف event.preventDefault() از نمایش پاپ آپ پیش فرض مرورگر جلوگیری کرده ایم. بجای آن ما می خواهیم div ای که در بالا تعریف کرده ایم را به کاربر نمایش دهیم. کلاس error را به آن اعمال کرده ایم و خاصیت display آنرا برابر block تعریف کرده ایم.

تعریف کلاس های invalid، animated و shake:

کلاس invalid را برای input تعریف کرده ایم که در کد زیر این کلاس را تعریف می کنیم:

input.invalid {

        border-color: #DD2C00;

}

 

علاوه بر کلاس invalid ، دو کلاس animated و shake را نیز برای input نامعتبر در نظر گرفته ایم که برای استفاده از این کلاس ها می توانید از انیمیشن های Animate.css استفاده کنید.

» توصیه می شود مقاله "آموزش تکنیک های CSS" را مطالعه کنید.

تعریف رویداد input:

رویداد دوم که باید مورد استفاده قرار گیرد، input می باشد. این رویداد زمانی فراخوانی می شود که مقدار داخل input تغییر کند. ما از این رویداد برای برعکس کردن حالت اعتبار input استفاده می کنیم. یعنی اگر خاصیت display فیلد برابر block است، آنرا none می کند. تصویر زیر را در این زمینه در نظر بگیرید:

 

اعمال افکت و انیمیشن به اعتبارسنجی html5

 

اعتبارسنجی سمت سرور و سمت کاربر:

فراموش نکنید که علاوه بر اعتبارسنجی کلاینت ساید (ClientSide Validation) باید اعتبارسنجی را در سمت سرور (Serverside) نیز انجام دهید. نکته جالب اینست که اگر کاربر، قابلیت javascript مرورگر خود را غیرفعال کرده باشد، همچنان پیام های خطای مربوط به اعتبارسنجی فرم های HTML5 را مشاهده خواهد کرد. تنها مرورگری که از اتریبیوت pattern پشتیبانی نمی کند، مرورگر سافاری (Safari Browser) می باشد که در ایران محبوبیت چندانی ندارد.

 

منبع: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute–cms-25145


برچسب‌ها:

Pattern AttributeValidationاتریبیوت patternاستایل پیام اعتبارسنجیاعتبارسنجیاعتبارسنجی html5اعتبارسنجی فرمپیام اعتبارسنجیرویداد oninvalid

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 + 17 =