Question

我正在尝试创建一个带有两个选项卡的bootstrap演示页面，每个选项卡包含一个带有几个输入字段的表单以及一个Cancel和Submit按钮。我想在切换选项卡时检查表单是否脏（如果表单中的任何字段已更改但尚未提交）。如果表单是脏的，我希望突出显示该表单的选项卡。我对Bootstrap很新，并试图让这个用例工作。

我尝试使用谷歌搜索这个问题，我找到了使用Angular JS来检查表单是否与引导程序一样脏的解决方案。由于我还没有像Angular这样的mv *框架工作，或者没有接触过这个领域，我想有一个使用JavaScript或jQuery的简单解决方案。

Answer 1

以下是如何执行此操作的示例。它不是使用Bootstrap，但你可以得到这个想法。

http://jsfiddle.net/98dk8d68/1/

这是bootstrap版本的快速模式：

http://jsfiddle.net/5pfune55/2/

var dirty = false;

$(':input').on('change keyup', function(){
   dirty = true; 
});

$("#dirtytabs").autotabs({
    show: function (tab) {
        dirty = false;
    },
    hide: function (tab) {
        if (dirty) {
            alert(tab + ' is dirty');
        }
    }
});

input, textarea{
    display: block;
    margin-bottom: 20px;
}

div.autotab{
    background: #fefefe;
    padding: 50px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,.1)
}

<div>
    <ul id="dirtytabs" class="autotab">
        <li class="active"><a data-tab="#tab1">tab1</a>

        </li>
        <li><a data-tab="#tab2">tab2</a>

        </li>
    </ul>
    <div style="margin-top:10px" class="autotab">
        <div id="tab1" class="tab">
            <form>
                <input />
                <textarea></textarea>
            </form>
        </div>
        <div id="tab2" class="tab">
            <form>
                <input />
                <textarea></textarea>
            </form>
        </div>
    </div>
</div>

检查bootstrap表单是否脏

1 个答案: