检查引导表单是否脏

Question

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

我尝试用谷歌搜索一下这个问题，我找到了使用 Angular JS 来检查表单是否被引导程序弄脏的解决方案。由于我没有研究过像 Angular 这样的 mv* 框架，也没有接触过该领域，所以我希望有一个使用 JavaScript 或 jQuery 的简单解决方案。

Answer 1

以下是您如何执行此操作的示例。它没有使用 Bootstrap，但您可以理解。

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

这里是引导版本的快速模组：

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>