Print Page - switch to focus a tab on a validation error

Title: switch to focus a tab on a validation error
Post by: fguibert on March 01, 2019, 04:19:08 AM

Hi,
I have a form dispatched in several Jeasyui tabs.
when I submit my form on the last tab and forgot to fill a mandatory input in the first tab, nothing happen because validation function do not raise/focus on the fisrt tab to show the error.

is it possible to raise the tab containing the error ?

I saw a invalidHandler in JQuery but don't seems to work with Jeasyui :

Code:

$(function(){
    $('#formAbonne').form({
        ajax:false,
        onSubmit:function(){
            return $(this).form('validate');
        },
        invalidHandler: function(e, validator){
            if(validator.errorList.length)
            $('#tabs a[href="#' + jQuery(validator.errorList[0].element).closest(".tab-pane").attr('id') + '"]').tab('show')
        }
    });
});

Title: Re: switch to focus a tab on a validation error
Post by: jarry on March 04, 2019, 07:22:00 AM

Please refer to this code.

Code:

$('#ff').form('submit', {
	onSubmit: function(){
		var form = $(this);
		var isValid = form.form('validate');
		if (!isValid){
			var field = form.find('.validatebox-invalid:first');
			var panels = $('#tabs').tabs('tabs');
			for(var i=0; i<panels.length; i++){
				var panel = panels[i];
				if (panel.has(field).length){
					var index = $('#tabs').tabs('select', i);
					setTimeout(function(){
						field.focus();
					},0)
					break;
				}
			}
		}
		
		return isValid;
	}
})

Title: Re: switch to focus a tab on a validation error
Post by: fguibert on March 04, 2019, 08:45:20 AM

thanks a lot jarry, it works great !

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: fguibert on March 01, 2019, 04:19:08 AM