我正在嘗試使用 Bootstrap 5 的客戶端驗證。但是，我發現這些用戶體驗不如我想的那樣好——單擊提交按鈕后，is-invalid類會一直保留到輸入正確的輸入為止。我想要它，以便is-invalid在用戶關注輸入時也立即清除該類，但我似乎無法做到這一點 - 一旦按下提交按鈕，就不會is-invalid使用 jQuery 或在焦點事件上清除類vanilla JavaScript（我更喜歡）有任何結果。
我novalidate在我的表單和一個needs-validation類上設定了屬性，并且表單包含兩個帶有invalid-tooltip它們的 div（而不是invalid-feedback）。
<form class="my-0 container needs-validation" method="POST" action="" novalidate>
<div class="col-lg-12 row py-4 px-5 gx-5">
<div class="col-lg-5 col-12 px-2 position-relative">
<label class="mb-3" for="code">1. Enter your code:</label>
<input class="form-control" type="text" name="code" id="code" aria-label="Enter your code" placeholder="1234"
required minlength="4">
<div class="invalid-tooltip">Enter a valid code.</div>
<div class="col-lg-5 col-12 px-2 my-4 my-lg-0 align-self-lg-start">
<label class="mb-3" for="email">2. Enter your email address:</label>
<input class="form-control" type="email" name="email" id="email" aria-label="Enter your email address" placeholder="[email protected]" required>
<div class="invalid-tooltip">Enter a valid email.</div>
</div>
<div class="col-lg-2 col-12">
<button class="btn btn-primary text-wrap mx-2" type="submit">Submit</button>
</div>
</div>
</form>
這是我目前用來處理提交的 JavaScript，取自Bootstrap 5 關于驗證的檔案：
(function () {
"use strict";
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll(".needs-validation");
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(
"submit",
function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
})();
做我想做的事的最好方法是什么（最好是純 JavaScript）？
uj5u.com熱心網友回復：
最后，我添加了以下 jQuery 解決方案，這是我在 Bootstrap 檔案提供的解決方案之后直接遇到的。不幸的是，我的 JavaScript 太生疏了，無法將其轉換為 ES6，更不用說將它與 Bootstrap JavaScript 解決方案集成了，所以我依賴其他人來為我做這件事，但無論哪種方式，它都可以很好地作為更現代的，提供客戶端驗證反饋的即時方式。
我還對其進行了修改，以對輸入而不是焦點進行反饋，這感覺更即時，因此與用戶除外，但這可以通過將input函式中的事件更改回focus或任何其他事件輕松恢復。
$(function () {
$(".needs-validation")
.find("input,select,textarea")
.on("input", function () {
$(this)
.removeClass("is-valid is-invalid")
.addClass(this.checkValidity() ? "is-valid" : "is-invalid");
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/417642.html
標籤：