jQuery验证Tab更改

Question

我正在使用jQuery Validate和Tabs插件.我希望在用户尝试从选项卡移动到其他两个选项卡之一时验证特定选项卡.有没有人有这种特殊方法的经验？

目前,这是我绑定Tabs插件的方式:

   $(function() {
      //Bind Link Tab Selection
      //------------------
      var $tabs = $("#tabs").tabs();
       $('#step1_button').click(function() {
          $tabs.tabs('select','2');
          return false;
       });
       $('#step2_button').click(function() {
          $tabs.tabs('select','3');
          return false;
       });
       //------------------
       //------------------

       //Bind Tabs
       //------------------
       $("#tabs").tabs({
          fx: {width:'toggle'}
       });
       //------------------
       //------------------
    });

Answer 1

每次更改选项卡时都可以运行一个函数,如下所示:

$("#tabs").tabs({
        select: function(event, ui) {
            // Do your validation here
        }        
});

您可以在这里查看官方文档.事件的内容在底部.

因此,您可以在该功能中对该选项卡中的某些控件进行验证.此外,您无需手动选择不同的选项卡,也可以通过使用获取您在函数内选择的选项卡的索引ui.index.此外,如果当前选项卡内容无效,您可以非常轻松地阻止用户更改为另一个选项卡event.preventDefault().总而言之,就像...

$("#tabs").tabs({
        select: function(event, ui) {
            alert('validating tab ' + ui.index);

            var valid = false;

            // do your validating here...
            // determine validity

            // If the form isn't valid, prevent the tab from changing
            if(!valid)
            {
                // prevent further action
                event.preventDefault();
            }
            else
            {
                // valid so we'll allow user to change tab
                alert('valid');
            }
        }        
});

你可以在这里玩代码.