/ معتبر سازی فرم ها در HTML5 و CSS3 - خداحافظی با معتبر سازی در JQuery
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
نمایش نتایج: از 1 به 3 از 3

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

  1. #1
    ROACH آنلاین نیست.
    ROACH
    کاربر سايت
    170نوشته242مورد پسند

    تاریخ عضویت
    Aug 2013
    شماره عضویت
    2724
    پسندیده است
    71 پست
    بلاگ
    پست
    میزان امتیاز
    252
    http://assassinsorder.com

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

    7 نفر از اعضا پست ROACH را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. نوين وردپرس تبلیغات شما

  3. #2

  4. #3
    Am!rH0ssein آنلاین نیست.
    Am!rH0ssein
    کاربر فعال و مفيد
    576نوشته605مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1583
    پسندیده است
    444 پست
    بلاگ
    پست
    میزان امتیاز
    615
    No Set
    خب شما اول باید html + css بلد باشید تا بتونید اینو پیاده سازی کنید
    چیز خواستی نیست که یک سری سلکتور های جدید css هست

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش JQuery بصورت کامل(معرفی Jquery)
    توسط Danial در انجمن دیگر آموزش ها
    پاسخ: 0
    آخرين نوشته: 07-22-2014, 09:26 PM
  2. آموزش JQuery بصورت کامل(مقدمه)
    توسط Danial در انجمن دیگر آموزش ها
    پاسخ: 4
    آخرين نوشته: 07-13-2014, 10:24 PM
  3. آموزش JQuery بصورت کامل(مقدمه)
    توسط Danial در انجمن آموزش های ویبولتین
    پاسخ: 4
    آخرين نوشته: 07-13-2014, 10:24 PM
  4. پاسخ: 0
    آخرين نوشته: 04-04-2014, 01:46 PM

کلمات کلیدی این موضوع

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

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی