我有 - 我認為是 - 一個非常簡單的問題。我正在Bootstrap 4.6和我一起作業，我想form-validation為我的input.
我需要檢查我input的長度是否為 5 或小于validation應為“不完整”（紅色）的長度，否則如果它等于或高于 5 則應為完整的，因此它應該為綠色。
紅色的：
綠色：
我想validation從 Bootstrap 4.6 獲得它 - 這是該組件的鏈接：https : //getbootstrap.com/docs/4.6/components/forms/#validation
在此先感謝您幫助我！
在這里你可以看到我的代碼：
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<input class="form-control" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
</div>
</form>
function checkInput() {
var input = document.getElementById("validationTextarea").value;
if(input.length < 5) {
//it should be red
} else if (input.length >= 5) {
//it should be green
}
}
uj5u.com熱心網友回復：
如果你想要自定義驗證，那么你可以
1）was-validated從form元素中移除類，因為要添加自定義驗證
<form class="m-3">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<input class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
</div>
</form>
2）現在是邏輯部分，is-invalid如果values.length < 5不添加is-valid類，您必須添加類。
const input = document.querySelector("#validationTextarea");
function checkInput() {
var value = document.getElementById( "validationTextarea" ).value;
if ( value.length < 5 ) {
input.classList.remove( "is-valid" );
input.classList.add( "is-invalid" );
} else {
input.classList.add( "is-valid" );
input.classList.remove( "is-invalid" );
}
}
const input = document.querySelector("#validationTextarea");
function checkInput() {
var value = document.getElementById("validationTextarea").value;
if (value.length < 5) {
input.classList.remove("is-valid");
input.classList.add("is-invalid");
} else {
input.classList.add("is-valid");
input.classList.remove("is-invalid");
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="m-3">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<input class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/353169.html