Question

我正在使用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'}
       });
       //------------------
       //------------------
    });

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

jQuery验证Tab更改

1 个答案: