jQuery 验证选项卡更改答案

【问题标题】：jQuery Validate on Tab changejQuery 验证选项卡更改
【发布时间】：2011-09-07 15:24:04
【问题描述】：

我正在使用 jQuery Validate 和 Tabs 插件。当用户尝试从选项卡移到其他 2 个选项卡之一时，我希望验证特定选项卡。有人对这种特殊方法有经验吗？

目前，这是我绑定 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'}
       });
       //------------------
       //------------------
    });

【问题讨论】：

标签： jquery validation jquery-ui jquery-ui-tabs

【解决方案1】：

您可以在每次更改选项卡时运行一个函数，如下所示：

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

你可以看看官方文档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');
            }
        }        
});

您可以使用代码here。

【讨论】：