host3nter

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

درود دوستن در این آموزش میخوایم با معتبر سازی فرم ها یا Form Validation توسط HTML5 ...

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

HTML, ویبولتین, ویکی وی بی

تاريخ ارسال:2014/08/06

هاست سنتر درود دوستن در این آموزش میخوایم با معتبر سازی فرم ها یا 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="باید حداقل دو کاراکتر باشد و عددی نداشته باشد"></span> ما متنی که در ارور معتبر سازی نوشته شده است را داخل صفت 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 ساختیم موفق باشید هاست,دامین,سایت,وب,طراحی

تغغیر دامنه و اشکال در لود شدن انجمن

هاست پرسرعت و ارزان نیک وب

تفاوت مای بی بی با وی بی

قرمز رنگ کردن نام یک زیر انجمن ؟؟؟

قرمز رنگ کردن نام یک زیر انجمن ؟؟؟

سوال درباره سرعت بازگذاری و …

کلیدی ترین نکات یک لوگو

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

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

میزبانی وب ,هاست,فضای وب,ویندوز,لینوکس,دات نت,پی اچ پی,web hosting,windows host,linux host,asp.net,php,sql server,mysql میزبان پایتخت ارائه دهنده خدمات میزبانی وب، هاست و هاستینگ، میزبانی هاست، دامین، میزبانی نمایندگی، نمایندگی وب، سرور مجازی و سرور مجازی ابری می باشد.هاست,میزبانی وب,دامین,سرور مجازی,میزبان پایتخت,host,domain,vps,mizban paytakht,hosting,share hosting,میزبان وب,میزبانی هاست,هاستینگ

google
logo-samandehi