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

【问题标题】：Jquery tabs, how to indicate validation errors in other tabs when saving from another tabJquery选项卡，从另一个选项卡保存时如何指示其他选项卡中的验证错误
【发布时间】：2013-08-02 05:24:14
【问题描述】：

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

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

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

如何在标签页眉中添加图标？

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

【问题讨论】：

如果你使用 twitter bootstrap 很容易放一个图标。请检查我的小提琴。如果我们有同样的想法jsfiddle.net/rcgAX

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

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

jquery 智能向导看起来很不错，但是我已经使用过 jquery 选项卡，并且在整个项目中都使用过它，目前还不能使用它。感谢分享！

【解决方案3】：

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

【讨论】：