bootstrapValidator Tab Validation

bootstrapValidator İle Tab Kontrolü | bootstrapValidator Tab Validation

bootstrapValidator kullanıyorsanız ve formunuz yukarıdaki resimde olduğu gibi tablardan oluşuyor ise validation işlemi sağlıklı çalışmayacaktır. Çünkü diğer tab'a geçtiğinizde önceki tab'larda oluşan hatalar görülmediği için sanki formda hata yokmuş gibi işleme devam etmektedir. Aşağıda verdiğim js kodlarını eklediğinizde tab'ların hepsi hatasız olana kadar submit butonu disable olacaktır. Fakat öncelikli olarak şu kontrolü yapın: formda hata oluşunca ilgili tab kırmızı olmalıdır yani hata oluşan tab .bv-tab-error class'ına sahip olmalıdır. Böyle olduğunu kabul ederek devam ediyorum.

$(document).ready(function() {
    $('#ayarlarForm').bootstrapValidator({
        excluded: [':disabled'],
        ...
    }).on('success.field.bv', function(e, data) {
        //Tabs control
        if ( $('#tabs').find('.bv-tab-error').length ) {
            $("#btn-save-form").attr("disabled", true);
        }
    }).on('error.field.bv', function(e, data) {
        //Tabs control
        if ( $('#tabs').find('.bv-tab-error').length ) {
            $("#btn-save-form").attr("disabled", true);
        }
    });
});

Bu kadar. Artık hatalar kalkana kadar yani tablardan herhangi biri .bv-tab-error class'ına sahip değil ise submit butonu aktif olacak ve devam edilebilecektir.