آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

معتبر سازی فرم ها در HTML5 و CSS3 – خداحافظی با معتبر سازی در JQuery

معتبر سازی فرم ها در HTML5 و CSS3 - خداحافظی با معتبر سازی در JQuery
معتبر سازی فرم ها در HTML5 و CSS3 - خداحافظی با معتبر سازی در JQuery
معتبر سازی فرم ها در HTML5 و CSS3 - خداحافظی با معتبر سازی در JQuery

درود دوستن
در این آموزش میخوایم با معتبر سازی فرم ها یا Form Validation توسط HTML5 و CSS3 آشنا بشیم.
دیگه نیازی به JQuery برای این کار نیست و در واقع JQuery Form Validation دیگه جایی نداره با این صفاتی که HTML5 داره و سلکتور هایی که CSS3 در اختیار ما قرار دادن.

خب میریم سراغ آموزش.
فرض کنید فیلدی برای ایمیل دارید و با input درست شده

کد HTML:
<input type="email" name="email" id="email">

در صورتی که محتوای اون درست باشه (طبق صفاتی که در ادامه اموزش معرفی میکنید) میشه با Element Pseudo که مخصوص این کار معرفی شده و :valid هست به فیلد استایل خاصی داد.
در واقع خیلی ساده تر اگر بخوایم بگیم اگر فیلد محتواش درست بود یه استایلو میگیره اگر درست نبود یه استایل دیگه

کد:
input[type=email]:valid { /* style for field when t is valid */ }

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

کد:
input[type=email]:invalid:after { content: “Error message”;}

اما این کار عملی نیست چرا که input هم مانند img شبه عنصر after رو به خودش نمیتونه بگیره

پس … خیلی ساده از یک span استفاده میکنیم
قبل از این که span رو قرار بدیم ، گفتیم به صفتی که مشخص کننده ی معتبر بودن فیلد هست اشاره میکنیم.
این صفت pattern هست که مشخص کننده قانون یک فیلد بوده و اگر فیلد مورد نظر شرایطی که بنا شده رو نداشته باشه invalid میشه و اگر داشته باشه valid میشه.

خب حالا این صفت رو در فیلدی که ساخته بودیم به کار میبریم و یک span هم بعدش قرار میدیم.

کد HTML:
<input type="text" name="firstname" id="firstname" pattern="[^0-9][A-Za-z]{2,20}">
<span title="باید حداقل دو کاراکتر باشد و عددی نداشته باشد">

ما متنی که در ارور معتبر سازی نوشته شده است را داخل صفت title قرار میدهیم ، مرورگر هایی که از این بخش CSS3 پشتیبانی نمیکنند متن را نیز در نظر نخواهند گرفت.
ما باید مطمئن شویم که span دقیقا بعد از input قرار داشته باشد ، چرا که میخواهیم از سلکترو های همسایگی و خواهر برادری استفاده کنیم (مراجعه شود به پست سلکتور های css)

کد:
input ~ span:after { content: attr(title); color: red; margin-left: 0.6rem; }

با کد بالا در span همان متنی قرار خواهد گرفت که در title آن قرار دارد و رنگ آن قرمز بوده و کمی ار چپ فاصله دارد.

اما باید ان را مخفی کنیم تا تنها در صورتی که فیلد معتبر نبود نمایش داده شود
پس کد را به این شکل تغییر میدهیم.

کد:
input ~ span:after { content: attr(title); color: red; margin-left: 0.6rem; opacity: 0; }

با opacity: 0 متن نمایش داده نخواهد شد.
خب حالا برای نمایش دادن آن از :invalid استفاده میکنیم

کد:
input:invalid ~ span:after { opacity: 1; }

تفسیر کد بالا به این شکل است که در صورت معتبر نبودن فیلد ، متن بعد از آن opacity: 1 را به خود بگیرد.
خب تمام شد ، در صورتی که فیلد شما اشتباه باشه متن ارور نمایش داده میشه
ولی ممکنه از حالت ظاهر شدن یک دفعه ای راضی نباشید
پس کافیه transition و کمی delay بدید تا همون لحظه ارور ظاهر نشه
پس کد input ~ span:after رو کمی ادیت میکنیم

کد:
input ~ span:after { content: attr(title); color: red; margin-left: 0.6rem; opacity: 0;transition: opacity 2s 2s;}

به همین سادگی یک معتبر ساز فرم توسط صفت pattern در HTML5 و صفت content و سلکتور همسایگی یا خواهر برادری در CSS و همینطور :after و :invalid در CSS3 ساختیم
موفق باشید


(1) آشنایی با پشتیبانی HTML5 از مرورگرها
آشنایی با پشتیبانی HTML5 از مرورگرها - HTML5 در مرورگرهای قدیمی


(2) بهترین فریم ورک های رایگان HTML5
بهترین فریم ورک های رایگان HTML5


(3) اعتبار سنجی فرم ها توسط HTML5 - طراحی
اعتبار سنجی فرم ها توسط HTML5 - طراحی سایت اصفهان


(4) تفاوت HTML4 و HTML5 فرق html4 با html
تفاوت HTML4 و HTML5 فرق html4 با html 5 چیست html4 بهتر است یا


(5) معرفی HTML 5 فصل اول جلسه پنجم معتبر سازی فرم ها
با عرض سلام خدمت همه دوستان عزیز.در این جلسه از آموزش html5 به معتبر سازی فرمها توسط قابلیتهای html5 خواهیم پرداخت. پس با ما همراه باشید. نکته بنده در سری آموزشی HTML در قسمت کار با فرم ها به تفصیل در مورد بعضی از تگها


(6) مسترکد - دانلود قالب وردپرس دانلود قالب HTML دانلود
مسترکد با ارائه انواع آموزش در زمینه های متنوع از قبیل آموزش و ترفند های وردپرس آموزش و ترفند های جوملا معرفی افزونه ها و آموزش کارکرد آنها راه حل های عیب یابی آموزش html و css راهنمای استفاده از جی کوئری و


(7) دانلود رایگان کتاب کامل HTML و HTML5 - آموزش فارسی آموزش
این دوره در 2 فایل PDF تهیه شده به نام HTML و HTML5 که کتاب html در 122 صفحه آموزش داده شده و کتاب html 5 در 72 صحفه بیان شده است که هر دوی این فایل ها به زبان فارسی و ساده و شیوا و روان گفته شده و می توانید مورد استفاده قرار دهید .حجم این


(8) آموزش کامل سیاساس و اچتیامال دروس طراحی سایت با
توضیحات کلی مجموعه - بیش از 5 ساعت آموزش جامع و بسیار مفید CSS و HTML دوبله شده به فارسی از متخصصین شرکت معتبر TutsPlus. - آموزش دقیق و زمانبندی شده برای فراگیری کامل HTML و CSS در طول مدت سی روز .


(9) آموزش فوق العاده جامع HTML و CSS از صفر تا صد ویدئویی
دراین دوره رایگان و به معنای واقعی از صفر html و css رو آموزش خواهیم داد.دراین دوره شما با اصول و جزئیات طراحی وب بر پایه اچ تی ام ال و سی اس اس آشنا میشید


(10) دوره آموزشی پیشرفته HTML5 و CSS3
در این دوره کلیه مباحث مربوط به طراحی وب در رابطه با html5 و css3 را فرا خواهید گرفت. هیچ پیش نیازی لازم نیست و مباحث از مبتدی تا پیشرفته آموزش داده میشوند

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

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

2 × 4 =

دکمه بازگشت به بالا