اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
یک دقیقه
با استفاده از چهارچوب بوت استرپ میتوان رابطهای کاربر استانداردی ساخت که قبلا دوستان در این سایت مطالبی را در این باب نوشته اند.
مشکل:
دلیل:
راه حل:
البته میتوان این تغییر رفتار پیش فرض را فقط به فرم خاصی هم اعمال کرد. به این صورت
در مطلب صفحات مودال در بوت استرپ 3 در مورد ترکیب قالب بوت استرپ با سیستم اعتبارسنجی MVC و jQuery validation و نمایش فرمهای مودال بوت استرپ صحبت شده و بسیار کامل هست.
مشکل:
هنگام کار با بوت استرپ اگر از tabهای آن در فرم برنامه استفاده کنید، هنگام validate کردن فرم متوجه میشوید که فقط کنترلهای تب جاری اعتبارسنجی میشوند و بدون توجه به سایر کنترل هایی که در تبهای دیگر هستند و احیانا در وضعیت عدم اعتبار هستند، فرم اعتبارسنجی و کامل اعلام شده و اطلاعات ارسال میشود.
دلیل:
دلیل این اتفاق این هست که jQuery validation به طور پیش فرض کنترلهایی که در صفحه مخفی هستند را اعتبارسنجی نمیکند و نادیده میگیرد.
راه حل:
با تغییر رفتار پیش فرض سیستم اعتبارسنجی میشود این مساله را حل کرد. با اضافه کردن ignore: "" اعلام میشود که کنترلهای مخفی هم اعتبارسنجی شوند.
در نهایت کد کامل ترکیب قالب بوت استرپ با سیستم اعتبارسنجی جی کوئری به صورت زیر میشود. (فقط همان ignore: "" اضافه شده است).
function enableBootstrapStyleValidation() { $.validator.setDefaults({ ignore: "", highlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).addClass(errorClass).removeClass(validClass); } else { $(element).addClass(errorClass).removeClass(validClass); $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); } $(element).trigger('highlited'); }, unhighlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).removeClass(errorClass).addClass(validClass); } else { $(element).removeClass(errorClass).addClass(validClass); $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); } $(element).trigger('unhighlited'); } }); }
$("#form").validate({ ... rules: {...}, messages: {...}, ignore: "", ... });