www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫مشکل اعتبار سنجی jQuery validator در Bootstrap tabs


نویسنده: ابوالفضل رجب پور
تاریخ: ۱۳۹۲/۰۹/۲۴ ۹:۱۰
آدرس: www.dntips.ir
با استفاده از چهارچوب بوت استرپ می‌توان رابط‌های کاربر استانداردی ساخت که قبلا دوستان در این سایت مطالبی را در این باب نوشته اند.
در مطلب  صفحات مودال در بوت استرپ 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: "",
...
});
مطالب مشابه

نظرات

  • م راد در ۱۳۹۲/۱۰/۰۷ ۱۳:۳۸
    با تشکر از ارسال مطلب مفیدتون،
    اما موضوعی که پیش میاد اینکه چطوری به ازای هر تب ابتدا اعتبارسنجی فیلدهای اون تب انجام شه و بعد تب بعدی نمایش داده شه؟ 
    • محسن خان در ۱۳۹۲/۱۰/۰۷ ۱۹:۳۳

      خوب این همون حالت پیش فرضی هست که توضیح دادن: «هنگام validate کردن فرم متوجه می‌شوید که فقط کنترل‌های تب جاری اعتبارسنجی میشوند و بدون توجه به سایر کنترل هایی که در تب‌های دیگر هستند». این tab جاری منظور همون به ازای هر tab جداگانه هست.

      برای نمایش خودکار تب بعدی هم باید کدنویسی کنید. فقط کافی هست که کلاس active رو به div تب مورد نظر اضافه کنید:

      $("#home").removeClass("active");  // this deactivates the home tab
$("#profile").addClass("active");  // this activates the profile tab
      • حسامتم در ۱۳۹۵/۰۸/۱۷ ۱۱:۴۹
        لطفا اینجا رو هم ببینیدTabValidator
  • سالار ربال در ۱۳۹۷/۰۱/۲۸ ۱:۹
    نکته تکمیلی
    به صورت پیش فرض امکان مطلع شدن از خطاهای اعتبارسنجی درtabهای دیگر به غیر از tab جاری، ممکن نمی‌باشد؛ برای حل این مسئله می‌توان به شکل زیر عمل کرد:
     if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length === 0) {
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
                var id = $(tab).attr("id");
                $('a[href="#' + id + '"]').tab('show');
            });
        }
    در تکه کد بالا ابتدا بررسی می‌شود در tab جاری هیچ خطای اعتبارسنجی وجود نداشته باشد؛ سپس به صورت خودکار tab ای که دارای خطای اعتبارسنجی می‌باشد، فعال خواهد شد.
    اگر از unobtrusive validation استفاده نمی‌کنید، می‌توانید به شکل زیر عمل کنید:
    $.validator.setDefaults({
    //برای رفع مشکل عدم اعتبارسنجی المان‌های مخفی مانند تب‌های بسته
    ignore: [],
    invalidHandler: function (event, validator) {
        if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length === 0) {
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
                var id = $(tab).attr("id");
                $('a[href="#' + id + '"]').tab('show');
            });
        }
    }
});
    invalidHandler زمانی که فرم دارای خطاهای اعتبارسنجی می‌باشد و سعی داریم آن را به سمت سرور ارسال کنیم (این اتفاق رخ نمی‌دهد)، فراخوانی می‌شود.
    در غیر این صورت لازم است، مشترک رویداد «invalid-form.validate» شوید؛ به شکل زیر: 
    $("form").unbind("invalid-form.validate"); // unbind default MS handler
$("form").bind("invalid-form.validate", function(event , validator) {
    if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length === 0) {
        $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');
        });
    }
});