Question

我在私人项目上使用jQuery UI标签。

我的标签标识如下：

  <ul>
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    ....
  </ul>

所有这一切都很好。

但是在每个标签的内容中我都有一些表格。我需要当我点击＃tab2，而＃tab1处于活动状态时，在＃tab1中的表单中进行一些验证，如果一切正常，则显示该选项卡。

我有这个标签的监听器

    $('a[href$="#tab1"]').click(function(){
        return false;
    });

检查周围的SO并找到答案告诉返回虚假，（这没有用）其他人指向官方文档，但我无法应用工作解决方案。

我该怎么做？

修改

这是小提琴

Fiddle

Answer 1

这只会转到下一个标签，当前所有输入都不为空：

$("a[href*='tab']").click(function(){
    if($("input[value='']").length > 0){
        return false;
    }
}

Answer 2

你可以这样做：

 $('#mydiv').tabs({
        activate: function(event, ui) {
            var sel = ui.newPanel.attr('id');
            if (sel == 'mydiv1' )
            {
                if(!validate()){
                    $(this).tabs({
                        active: 0
                    });
                }
            }

            if (sel == 'mydiv2' )
            {
                if(!validate()){
                    $(this).tabs({
                        active: 1
                    });

                }
            }
        }});

Answer 3

来自官方文档beforeActivate

这将在激活选项卡之前立即触发，允许您进行验证并允许显示选项卡。

$( "#tabs" ).tabs({
  beforeActivate: function( event, ui ) {
    var clicked_id = ui.newPanel.attr('id');
    if (clicked_id == 'tab2' )
    {
       // Do your validations
        return false;
    }
    .... 
  }
});

Answer 4

您可以使用beforeActivate事件并检查旧面板中的所有输入是否都已填充。

代码：

$("#tabs").tabs({
    beforeActivate: function (event, ui) {
        var $emptyFields = $("input",ui.oldPanel).filter(function () {
            return $.trim(this.value) === "";
        });
        if ($emptyFields.length) return false
    }
})

演示：http://jsfiddle.net/IrvinDominin/5ypo0xgo/

jQuery UI选项卡，在切换选项卡之前进行验证

4 个答案: