假設我有這樣的HTML:

...
<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="invalidCheck">
        <label class="form-check-label" for="invalidCheck">
            Agree to something
        </label>
    </div>

    <div class="invalid-feedback">
        I am outside of `form-check`!
    </div>
</div>
...

我想強行展示一下& ltdiv class= "無效反饋" >...不使用JavaScript(只想使用Bootstrap CSS)。我知道我可以使用像was-validated或is-invalid這樣的CSS類，但是invalid-feedback不在表單檢查之內。有沒有一種簡單易行的方法，通過添加與引導相關的CSS類來顯示無效反饋？

我找到了一個解決辦法:

<div class="invalid-feedback d-block">
    Now I am visible!
</div>

但我覺得這是一個蹩腳的解決方案。請指教！

使用顯示類別手動顯示它，例如d-block

像這樣使用它

<div class="valid-feedback d-block">

或者

<div class="invalid-feedback d-block">

在文檔中查找更多信息

有更好的方法。

1) 查看一個經過was驗證的類，您可以像這樣在表單上設置它

<form action="..." class="was-validated" method="POST" novalidate>

當在表單上設置時，它顯示驗證反饋，并對輸入字段進行顏色編碼。

當服務器端驗證失敗時，只需在表單上有條件地添加它。

2) 或者您可以使用一些JavaScript來控制顯示的內容。您可以動態添加這個類

$('form').addClass('was-validated');

你也可以像這樣動態檢查表單是否有效

if ($('form').checkValidity()) {...

如果您有一個帶有invalid-feedback類的div，但是它并不緊接在一個必需的input標記之后，那么即使將was-validated添加到表單中，它也可能不會顯示。然而，下面的黑客應該工作。

<form>
    <!-- form inputs to validate here -->
    <!-- something else -->
    <input type="hidden" value="hack" required> <!-- the hack -->
    <div class="invalid-feedback">Here is some global feedback to show</div>
    <button id="submit-button" type="submit">Submit</button>
</form>