10

我在几个 Twitter 的 Bootstrap 选项卡上有一个表单：

<form id="personal-data" class="form-horizontal">
  <div class="tabbable">
    <ul id="tab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
      <!-- ... -->
    </ul>

    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="home">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <input type="text" id="field1">
            </div>
          </div>
        </fieldset>
      </div>
      <div class="tab-pane fade" id="profile">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <input type="text" id="field2">
            </div>
          </div>
        </fieldset>          
      </div>

当我valid在活动选项卡上使用 jQuery validate 吃表单并且具有无效值的字段在同一个选项卡上时，验证失败（这是正确的）。但是当我在一个选项卡上并且无效值在另一个选项卡上时，验证返回true，这是不正确的。我该如何解决？如何在另一个选项卡上突出显示该字段？

请看这个演示（只需按下按钮下一步- 它会显示错误消息，然后转到最后一个选项卡并在那里按完成）。

4

6 回答 6

15

我认为您的问题在于验证仅发生在可见元素中。

阅读这个问题，我们在 1.9 版中看到

固定 #189 - :hidden 元素现在默认被忽略

和一些评论下来的解决方案

$.validator.setDefaults({
    ignore: ""
});
于 2012-04-13T17:54:37.313 回答
3

我启用标签的解决方案

...
highlight: function(label) {
        $(label).closest('.control-group').addClass('error');

        $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each( function(){
            var id = $(this).attr("id");
            $('#tabs a[href="#'+id+'"]').tab('show');
        });
},
...

有必要添加此代码以允许通过 js 更改选项卡

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
});
于 2012-10-09T18:42:48.513 回答
1

感谢您的代码，它解决了我的大部分问题，除了导航到有错误的第一个选项卡的部分。我绕过如下：

        var IsValid = true;

        // Validate Each Bootstrap tab
        $(".tab-content").find("div.tab-pane").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');

            var IsTabValid = $("#SomeForm").valid();

            if (!IsTabValid) {
                IsValid = false;
            }
        });

        // Show first tab with error
        $(".tab-content").find("div.tab-pane").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');

            var IsTabValid = $("#SomeForm").valid();

            if (!IsTabValid) {
                return false; // Break each loop
            }
        });
于 2014-04-25T03:41:03.740 回答
0

基于@juanmanuele 的回答，这就是我设法让它与Bootstrap 3 选项卡一起工作的方式：

if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
{
    $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
    {
        var id = $(tab).attr("id");

        $('a[href="#' + id + '"]').tab('show');
    });
}

将焦点放在第一个输入错误上：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
     e.target // activated tab

     $($(e.target).attr('href')).find("div.has-error :input:first").focus();

     //e.relatedTarget // previous tab
});
于 2013-10-12T16:12:19.687 回答
0

您正在使用这些 jQuery 选项卡吗？您可以停用所有其他选项卡并在每个表单上提交的数据通过验证时逐渐激活它们。在构造函数中禁用除第一个之外的所有它们，并在每次验证后启用下一个。

.tabs( "enable" , index )

在这里阅读更多。

您还可以将一种最终验证方法放在最后，并根据选项卡将所有内容显示出来，这样您就可以避免重新加载链接。

于 2012-04-13T17:37:12.320 回答
0

不完全是 jQuery Validate 的解决方案，但您可以在表单元素上使用“无效”事件，以捕获 HTML5 验证错误，并获取焦点元素，找到相应的选项卡窗格并显示它。

我已经做到了。

$("form").find("input, select").on("invalid", function() {
  var id = $(this).parents(".tab-pane").attr("id");

  $("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show");
});

希望这对您有所帮助。同样，这是针对 HTML5 或 jQuery Validate 触发无效事件的情况。

于 2014-01-10T18:41:39.283 回答