Skip to content

Instantly share code, notes, and snippets.

@jgdoncel
Created December 20, 2016 12:22
Show Gist options
  • Save jgdoncel/c7a7bb4ff98b1c0aa64006d015ad8241 to your computer and use it in GitHub Desktop.
Save jgdoncel/c7a7bb4ff98b1c0aa64006d015ad8241 to your computer and use it in GitHub Desktop.
jquery.validate - Focus bootstrap tab with firts invalid element
...
invalidHandler: function(e, validator){
if(validator.errorList.length)
$('a[href="#' + jQuery(validator.errorList[0].element, '#tabs').closest(".tab-pane").attr('id') + '"]').tab('show')
},
...
@csalgueiro
Copy link

csalgueiro commented Dec 20, 2016

Para un solo formulario con varias tabs, incluso dos niveles de tabs.

invalidHandler: function(form, validator) {
    if (!validator.numberOfInvalids()) return;
    $('body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top - 140
        }, 100, 'swing',
        function () {
            var title = "";
            var mensaje = "";
            if ($(validator.errorList[0].element).closest(".tab-pane").length > 0) {
                var id_tab = $(validator.errorList[0].element).closest(".tab-pane").attr("id");
                var id_page = $(validator.errorList[0].element).closest(".page").attr("id");

                if($(validator.errorList[0].element).closest(".tab-pane").parent().closest(".tab-pane").length>0){
                    var id_tab_parent = $("#"+id_tab).parent().closest(".tab-pane").attr("id");

                    $('.nav-tabs a[href="#' + id_tab_parent + '"]', '#' + id_page).tab("show");
                    $('.nav-tabs a[href="#' + id_tab + '"]', '#' + id_page).tab("show");
                    title = $('.nav-tabs a[href="#' + id_tab_parent + '"]', '#' + id_page).text()+" > "+$('.nav-tabs a[href="#' + id_tab + '"]', '#' + id_page).text();
                }else{
                    $('.nav-tabs a[href="#' + id_tab + '"]', '#' + id_page).tab("show");
                    title = $('.nav-tabs a[href="#' + id_tab + '"]', '#' + id_page).text();
                }
                mensaje ='Hay ' + validator.numberOfInvalids() + ' error' + ((validator.numberOfInvalids()>1)?'es':'') + ' en el formulario, el primero de ellos en la pestaña ' + title + '. Es necesario que lo' + ((validator.numberOfInvalids()>1)?'s':'') + ' corrija para continuar\n';
                $(validator.errorList[0].element).focus();
                Interface.showToast(mensaje)
            }else{
                title = $(validator.currentForm).attr('title');
                mensaje = 'Se ha' + ((validator.numberOfInvalids()>1)?'n':'') + ' encontrado ' + validator.numberOfInvalids() + ' error' + ((validator.numberOfInvalids()>1)?'es':'') + ' en el formulario ' + title + '. Es necesario que lo' + ((validator.numberOfInvalids()>1)?'s':'') + ' corrija para continuar\n';
                $(validator.errorList[0].element).focus();
                Interface.showSnackBar(mensaje)
            }
        }
    );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment