將 class 添加到表單輸入

Question

我在將 class 添加到表單輸入時遇到問題（我正在嘗試制作一個表單驗證器，如果它是空的，邊框會變成紅色）我可以在除輸入之外的幾種類型的標簽中添加錯誤 class，為什么會這樣？ （我用了 class 因為我打算多放 forms 剛開始開發就卡住了）

CSS

button {
    height: 50px;
    width: 200px;
    font-size: 28px;
    margin: 100px 0px;
}

.error {
    border: 2px solid red;
} 

.form-control {
    border-radius: 2px;
    font-size: 32px;
    width: 300px;
    height: 50px;
}

HTML

    <div>
        <form>
            <input type="text" name="digitar" id="digitar" class='form-control'><br>
            <button id='myBtn'>Clique aqui!</button>
        </form>
    </div>

Javascript

let element = document.getElementsByClassName('form-control')

document.getElementById("myBtn").addEventListener("click", function(){
    event.preventDefault()
    element.classList.add("error");
})

Answer 1

getElementsByClassName返回數組元素需要更改為

let element = document.getElementsByClassName('form-control')[0];

 let element = document.getElementsByClassName('form-control')[0]; document.getElementById("myBtn").addEventListener("click", function(){ event.preventDefault() element.classList.add("error"); })

 button { height: 50px; width: 200px; font-size: 28px; margin: 100px 0px; }.error { border: 2px solid red; }.form-control { border-radius: 2px; font-size: 32px; width: 300px; height: 50px; }

 <div> <form> <input type="text" name="digitar" id="digitar" class='form-control'><br> <button id='myBtn'>Clique aqui!</button> </form> </div>

Answer 2

如果您嘗試通過 document.getElementsByClassName('form-control') 獲取元素，那么當有多個輸入具有相同的 class 時，您將獲得元素數組。

正如您要求應用驗證 class，必須有一些特定的條件/規則才能通過您的業務邏輯應用驗證。 所以我建議你根據name/id屬性申請class

document.querySelector('[name="digitar"]').classList.add('error')

Answer 3

您可以使用 css 來制作它。

首先在您的輸入標簽中添加required的屬性。

<input type="text" name="digitar" id="digitar" class='form-control' required>

然后在您的 css 中。

.form-control:focus:invalid {
    border: 2px solid red;
}

它將關注無效（空）的 forms。