jQuery UI Tabs: Don't let user switch tabs if form input in active tab has content

Question

I'm using jQuery UI Tabs, and these tabs are inside a form. Every tab contains a number of form fields, which can be filled. It looks something like this:

<form>
<tab1 href=tabcontent1> <tab2 href=tabcontent2> <tab3 href=tabcontent3>

<div tabcontent1>
<input field>
<input field>
</div>

<div tabcontent2>
<input field>
<input field>
</div>

<div tabcontent3>
<input field>
<input field>
</div>

<submit button>
</form>

Problem is, If the user for example have started filling the fields of tab1, I don't want the user to be able to fill the fields of tab2 or tab3.

So, I'm looking for a way to check if the user have started to fill the input fields of a tab, and if this is the case, hide the other tabs / disable switching to the other tabs.

If the user removes the stuff he has written, he should once again be able to switch tabs.

Thanks for your help, it's greatly appreciated!

// Jens.

K K K K · Accepted Answer · 2014-11-16T16:54:43

You could have used beforeActivate function of jQuery tab to do this. Since your code is not complete and hence not clear, I will just take the sample example from jQuery tabs documentation:

JS:

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            var content = ui.oldPanel; // Get current content
            var input = $(content).find('input.i'); //Get input
            if (input.val()) { // Check if input has any value or whatever condition you want.
                alert('not allowed');
                return false; //Stop loading new tab if condition is satisfied.
            }
        }
    });
});

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/416/

jQuery UI Tabs: Don't let user switch tabs if form input in active tab has content

1 Answers