Question

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

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

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

如何在标题页中添加图标？

还有其他更好的想法，我可以用于我的问题。请指教。

Answer 1

以下是我使用的内容，fiddle 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;
}

Answer 2

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

Answer 3

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

Jquery选项卡，从另一个选项卡保存时如何在其他选项卡中指示验证错误

3 个答案: