ایجاد اعتبارسنجی با استفاده از BootStrap و jQuery Tooltip

در این مقاله شما درباره jQuery Tooltip Validation با استفاده از BootStrap مطالبی را خواهید اموخت . شاید به این مشکل بر خورده باشید که با نمایش پیغام شما در یک فرم ، صفحه بندی شما کاملا به هم بریزد ، ما در این مقاله سعی در برطرف نمودن این مشکل با استفاده از tooltip ها را داریم .

در حالت کلی ما از jQuery unobtrusive validation Plugin ها در برنامه های ASP.Net MVC استفاده می کنیم .
ما در این مقاله در مورد مطالب زیر مطالبی را خواهیم آموخت :
۱-معایب jQuery Validation  در MVC .
۲- jQuery tooltip validation .

برخی معایب در استفاده از این Plugin  وجود دارد . در زمان استفاده از این plugin ، یک تگ span را برای نمایش پیام خطا (Error Messages) ایجاد می کند .اگر شما ، برای مثال ، یک فرم افقی بالای کنترلر ها دارید ،  ممکن است که آن درست کار نکند ، تا زمانی که از page layout رد شوند . برای همین تصمیم بر آن شد تا تغییراتی را در کتابخانه jQuery Validation ایجاد کنیم تا بجای استفاده از span در نشان دادن  Error Message ها از Tooltip استفاده کند . که به شما  چگونگی این کار را  نشان خواهیم داد .
به کمک BootStrap از tooltip استفاده کنید .

قبل از این که به سراغ tooltip ها برویم ، نگاهی به روش قدیمی آن می اندازیم ، که در زیر آن را می بینیم .

1-jQuery Validation Unobtrusive Native

زمانی که روی دکمه Register کلیک میکنیم ، همانطور که در شکل زیر مشاهده میکنید ، پیامی نمایش داده میشود .

2-jQuery Validation Unobtrusive Native

اگر من طول پیام را زیاد کنم ، اتفاق بالا رخ می دهد و قسمت بندی صفحه به هم میخورد . در نتیجه این یکی از دلایلی است که استفاده از default behavior of the  jQuery validation plugin  را بد میکند . ما tooltip را با Error type عوض میکنیم به این دلیل که ما نمیخواهیم صفحه بندی ما به هم بخورد .

از این جا به بعد تازه مقاله jQuery tooltip validation شروع می شود .

مرحله اول :

۱-یک پروژه ASP.Net MVC  بسازید .

3-jQuery Validation Unobtrusive Native

۲-فایل های زیر را به برنامه اضافه کنید .

4-jQuery Validation Unobtrusive Native

۳- HomeController.cs. را بسازید .

Right click->Controllers folder->Add->Controller->name it as HomeController.cs.

5-jQuery Validation Unobtrusive Native

۴-متد Index را به Controller اضافه کنید .
۵- view را به متد View اضافه کنید .

Right click->Index Method->Add View->click OK.

6-jQuery Validation Unobtrusive Native

 Index View ساخته شد .

۶-حالا کدهای زیر را در فایل Index.cshtml قرار دهید .

مرحله دوم :
۱- myscript.js را به پوشه script اضافه کنید .

myscript.js

مرحله سوم :
Style را برای نمایش دادن error اضافه کنید .

حالا برنامه را دوباره اجرا کنید ، خروجی زیر را خواهیم داشت .

7-jQuery Validation Unobtrusive Native

 بدون اضافه کردن چیزی در فیلد ها ، دکمه ثبت را میزنیم ، خواهیم دید که :

8-jQuery Validation Unobtrusive Native

در بالا دیدیم که افزایش طول Error دیگر تاثیری در صفحه بندی ما نخواهد داشت ، و با اضافه شدن طول erro طول  tooltip ما افزایش خواهد یافت .

دانلود سورس کد
پسورد : csharpoop.com

ایجاد اعتبارسنجی با استفاده از BootStrap و jQuery Tooltip
امتیاز دهید

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

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

حاصل جمع اعداد را وارد کنید : *