Javascript檢查輸入字段是否有價值

Question

我試圖弄清楚Javascript如何檢查輸入字段是否有任何值，然后刪除類值“ is-invalid”。

到目前為止，我有以下代碼：

<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>

<script>
        var checkInput = document.getElementById("inputName");
        if (checkInput.value) {
        element.classList.remove("is-invalid");
        }
</script>

如您所見，輸入周圍有一個紅色邊框（class =“ is-invalid”）。 一旦用戶在輸入字段中輸入任何值，Javascript將刪除類值“ is-invalid”。

還是jQuery有一個更簡單的選擇？

Answer 1

您的代碼有誤。 你用過

element.classList.remove("is-invalid");

這是錯誤的，您必須像

checkInput.classList.remove("is-invalid");

您可以在javascript中使用此類。

 function check(){ var checkInput = document.getElementById("inputName"); if (checkInput.value) { checkInput.classList.remove("is-invalid"); } else { checkInput.classList.add("is-invalid"); } } 

 <form> <label for="inputName">Username</label> <input type="text" class="is-invalid" id="inputName" onkeyup="check()"> </form> 

在jQuery中，您可以嘗試像

 $('#inputName').keyup(function(e){ if ($('#inputName').val()) { $('#inputName').removeClass("is-invalid"); } else { $('#inputName').addClass("is-invalid"); } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label for="inputName">Username</label> <input type="text" class="is-invalid" id="inputName"> </form> 

Answer 2

您需要向元素添加事件偵聽器，以了解其何時更改。

  var checkInput = document.getElementById("inputName");
    checkInput.addEventListener('keyup', (e)=>{
      if (e.target.value!==''){
        e.target.classList.remove("is-invalid");
    }
  })