illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای پیشرفته jQuery (قسمت 50)

0 237 ۱۱ آذر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع پنجم : استفاده از پلاگینها

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

ابزارهای زیادی برای اعتبار سنجی فرمها و input وجود داره، اما بسیاری از اونا کار کردن باهاشون سخته و نمیشه به سرعت از اونا استفاده کرد. اگر میخاید که به سادگی فرمهاتون رو اعتبارسنجی کنید میتونین از پلاگین validate.js استفاده کنید.

این ابزار هیچ پیش نیازی نداره و بصورت مستقل کار میکنه. میتونید پیامهایی که میده رو با سلیقه خودتون تغییر بدین. مرورگرها پشتیبانی خوبی از این ابزار دارند بطوری که در IE6 هم پشتیبانی میشه!!

در ابتدا باید این ابزار رو include کنید:

کدهای HTML:

در ابتدا یک فرم با تعدادی اینپوت قرار میدیم که عملیات اعتبار سنجی رو بر روی اونا انجام بدیم.

مبینید که دو input و یک textarea و یک دکمه برای ثبت فرم قرار دادیم. میبینید که برای فرم یک id بنام clientInfo قرار دادیم و بعدا به وسیله همین id به فرم دسترسی داریم و پلاگین رو بر روی اون اعمال میکنیم.

تا اینجا ظاهر بصورت زیر هست:validatejs

کدهای JS:

میبینید که با استفاده از عملگر new یک نمونه جدید از شئ FormValidator ساختیم و id اون فرم رو بعنوان پارامتر اول اون نسبت دادیم. به عنوان پارامتر دوم میتونید موارد مورد نظرتون رو مشخص کنید.

حالا میتونیم شروط مورد نظرمون رو برای هر المنت قرار بدیم:

همونطور که میبینید با استفاده از ویژگی name ، آی دی المنت مورد نظر رو قرار میدیم. درون ویژگی display هم میتونین نام المنت مورد نظرتون رو وارد کنید که در زمان ارور نمایش داده بشه. اگر این ویژگی مشخص نشده باشه display همون name خواهد بود. درون ویژگی rules هم ، شرایط اون اینپوت رو قرار میدیم. شروطی که در بالا وجود داره رو براتون توضیح میدم:

  • required : اگر این مقدار رو قرار بدین اون المنت اجباری هست و حتما باید پر بشه
  • valid_email : مقدار باید یک email معتبر باشه
  • min_length : حداقل تعداد کاراکتر
  • max_length : حداکثر تعداد کاراکتر

تا اینجا شروط خودمون رو برای اینپوتها قرار دادیم ، حالا میخایم زمانی که بر روی submit کلیک شد ، اگر اروری وجود داشت درون alert به کاربر نمایش داده بشه:

با استفاده از این روش همه ارورها در Alert نمایش داده میشه. شما میتونین ارورها رو بعد از هر المنت قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram