0

我正在使用 jquery 选项卡来允许我的用户输入信息。所以现在我也有 5 个标签，每个标签都有几个字段。许多字段都有用于它们的客户端 jquery 验证。在每个选项卡中，我都使用了一个通用的保存按钮。

假设用户在 TAB 2 上，他尝试保存，但 TAB 1 上的验证失败，所以在这种情况下，我想告诉用户 TAB 1 有一些他需要纠正的验证错误，然后他才能保存。

因此，为此我计划在该选项卡出现任何验证错误时在选项卡名称旁边添加一个错误图标。

如何将图标添加到选项卡标题？

有没有其他更好的想法可以用来解决我的问题。请指教。

4

3 回答 3

1

这是我使用的，在Drixson Oseña在他的评论中分享的小提琴的帮助下。希望这对其他人也有帮助:)

更新小提琴：http: //jsfiddle.net/yrshaikh/rcgAX/2/

html

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor<span id="tab1" class="boing">!</span></a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab1</p>
  </div>
  <div id="tabs-2">
    <p>Tab2</p>
  </div>
  <div id="tabs-3">
    <p>Tab3</p>
  </div>
</div>

<input type="button" value="Show Error on Tab2" id="add" />
<input type="button" value="Hide Error on Tab2" id="remove" />

jQuery 

$(document).ready(function(){

    $( "#tabs" ).tabs();

    $("#add").click(function(){
    $("#tab1").css('visibility',  'visible');
    });    

    $("#remove").click(function(){
    $("#tab1").css('visibility',  'hidden');
    });

});

CSS 

.boing {
    margin-left:5px;
    color:red;
    visibility: hidden;
}
于 2013-08-05T04:24:50.960 回答
0

在您的案例中分享我以前工作的一个想法，您可能会尝试使用向导表单。看看这个Jquery 智能向导

于 2013-08-02T06:09:36.627 回答
0

您可以在元素的属性中添加验证，例如required="required"检查空字段。如果当前给定选项卡上有错误，这将限制用户导航到下一个选项卡。

于 2017-09-11T00:54:00.153 回答