jquery验证启动后，bootstrap输入组btn被推下来

Question

我有自举样式：

<div class="form-group">
            <label for="formEmail">User Email</label>
            <div class="input-group">
                <select class="form-control" data-rule-emailRequired="true" name="email" id="formEmail">
                    <option value="default">Please Select Users</option>
                </select>
                <span class="input-group-btn">
                    <button class="btn btn-default" id="addUserBtn" type="button">Create User</button>
                </span>
                <span class="input-group-btn">
                    <button class="btn btn-default" id="newUserBtn" type="button">Add User</button>
                </span>
            </div>
            <ul id="issueUserList" class="list-group list-inline"></ul>
        </div>

你可以看到它有一个数据规则验证，当它返回false并弹出错误信息时它会推送下面的input-group-btn看下一张图片

我的CSS是

.input-validation-error { border: 2px solid red; }

.field-validation-error { color: red; }

label.error {
    color: red;
}
input.error, textarea.error, select.error {
    color: black;
    background-color: #ebccd1;
    border-color: #ebccd1;
    border: 2px solid red;
}


div #loading {
    display: none;
}

.input-group {width: 100%}
#issueTable_length {
    margin-top: 2%;
}
.jumbotron {
    margin-top: 2%;
}

有人可以给我任何建议或告诉我我做错了什么吗？ 提前致谢

Answer 1

触发验证的Javascript / jquery类（在这种情况下为.input-validation-error）应该应用于整个input-group元素，而不仅仅是选择元素。

Answer 2

我发现我的解决方案是制作自定义错误标签并在那里附加错误消息。我已按照此说明解决了我的问题https://stackoverflow.com/a/4044251/6603342