jQuery UI选项卡:如果活动选项卡中的表单输入包含内容,则不要让用户切换选项卡

时间:2014-11-16 16:38:08

标签: jquery forms tabs jquery-ui-tabs

我使用的是jQuery UI标签,这些标签位于表单中。每个选项卡都包含许多表单字段,可以填写。它看起来像这样:

<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>

问题是,如果用户已经开始填写tab1的字段,我不希望用户能够填写tab2或tab3的字段。

所以,我正在寻找一种方法来检查用户是否已经开始填充选项卡的输入字段,如果是这种情况,请隐藏其他选项卡/禁用切换到其他选项卡。< / p>

如果用户删除了他写的东西,他应该再次能够切换标签。

感谢您的帮助,非常感谢!

// Jens。

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery选项卡的beforeActivate函数来执行此操作。由于您的代码不完整且因此不清楚,我将从jQuery选项卡文档中获取示例示例:

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.
            }
        }
    });
});

演示:http://jsfiddle.net/lotusgodkk/GCu2D/416/