مرجع مقالات رسمی طراحی سایت مرجع مقالات رسمی طراحی سایت .

مرجع مقالات رسمی طراحی سایت

فردی سازی پیغام اعتبارسنجی در HTML5


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

 طراحی سایت

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

 

”Username”

 


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

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

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

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

 

”Username”

 


فعلا میتوانیم المان 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 و validationMesغیر مجاز می باشدe که در نمونه بالا، بوسیله متد 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 ها اعمال میگردد. بدین ترتیب ویرایش زیاد استایل های آن سبب سردرگمی یوزرها خواهد شد.


برچسب: طراحی سایت،
امتیاز:
 
بازدید:

+ نوشته شده: ۲۷ شهریور ۱۳۹۸ساعت: ۱۰:۵۹:۰۰ توسط:علی پور موضوع: نظرات (0)