在某些輸入元素中無法使用has-error

Question

我正在嘗試驗證模式中可用的一些輸入：

<div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
        <h3 class="modal-title">Manage</h3>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="tim-icons icon-simple-remove"></i>
        </button>
        </div>
        <div class="modal-body">
        <div class="modal-message alert" style="display:none"></div>
        <form>
            <fieldset>
                <legend>Details</legend>
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="form-group">
                            <label class="control-label">name</label>
                            <input type="text" class="required form-control black-content">
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>
                    Informations
                </legend>

                <div id="questions-container">
                    <div class="card" data-id="1">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xs-12 col-sm-8">
                                    <div class="form-group">
                                        <label for="question-name" class="control-label">description *</label>
                                        <input type="text" class="required form-control" data-id="1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
        <div class="modal-footer">
        <button type="button" id="validate" class="btn btn-primary">save</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
        </div>
    </div>
</div>  

當我按下按鈕validate此功能將觸發：

var missingRequired = false;

$('#modal-section .required').each(function () {
    $(this).closest('.form-group').removeClass('has-error');

    if ($(this).val() == '' || $(this).val() == undefined) {
        $(this).closest('.form-group').addClass('has-error');
        missingRequired = true;
    }
});

本質上，這將檢查所有具有required類的輸入； 只有輸入name帶有紅色， questions-container可用的其他輸入則沒有。

如果我看一下HTML，我可以看到類has-error也被添加到questions-container可用的輸入中，但是輸入沒有顏色。 我擁有的元素上可用的CSS：

主題類：

.white-content .card:not(.card-white) label:not(.btn) {
    color: #344675;
}

引導程序類（在問題容器元素中進行了注釋）

.has-error .form-control-feedback, .has-error .control-label {
    color: #ec250d;
}

為什么會這樣呢？

Answer 1

根據我所提供的信息可以看出，您的錯誤CSS規則不夠具體。 嘗試將其更改為：

.card .form-group.has-error label.control-label {
    color: #ec250d;
}