如何在js中為所有具有特定類名的輸入欄位添加類屬性？

這是我的功能

function checkEmpty()
{
    var input = document.getElementsByClassName("input");
    for (var i = 0; i < input.length; i   )
    {
        if (input[i].value.length <= 0)
        {
            input[i].classList.add("error-class");
            return false;
        }
        else
        {
            input[i].classList.remove("error-class");
            return true;
        }
    }
}

這是我的表格

<div id="form-div">
    <form action="#" method="POST" onsubmit="return checkEmpty()">
          <input type="text" class="input" placeholder="First Name"/> </label>
          <input type="password" class="input" placeholder="Password"/> </label><br>
          <input type="submit" class="button" id="button" value="CLAIM YOUR FREE TRIAL"/><br>
     </form>
  </div>

這是要應用的類

.error-class
{
    background-image: url("../Registration-form/images/icon-error.svg");
    background-repeat: no-repeat;
}

我遇到了困難，因為我是 javascript 新手。

uj5u.com熱心網友回復：

我認為如果有任何輸入欄位為空，您需要禁用提交，因此您需要return true/false從回圈中洗掉，因為這將停止函式執行并中斷回圈，您需要添加一個名為valid并檢查是否有任何標志欄位為空將valid標志設定為 false 并在函式結束時檢查有效是否false禁用提交return false

function checkEmpty(e)
{
    var input = document.getElementsByClassName("input");
    let valid = true;
    for (var i = 0; i < input.length; i   )
    {
        if (input[i].value.length <= 0)
        {
            input[i].classList.add("error-class");
            valid = false;
        }
        else
        {
            input[i].classList.remove("error-class");
        }
    }
    if (!valid) {
      return false;
    }
}

.error-class
{
    background-image: url("../Registration-form/images/icon-error.svg");
    background-repeat: no-repeat;
    background-color: red; /* This for test you can remove it */
}

<div id="form-div">
    <form action="#" method="POST" onsubmit="return checkEmpty(event)">
          <input type="text" class="input" placeholder="First Name"/> </label>
          <input type="password" class="input" placeholder="Password"/> </label><br>
          <input type="submit" class="button" id="button" value="CLAIM YOUR FREE TRIAL"/><br>
     </form>
  </div>

uj5u.com熱心網友回復：

使用 classList.toggle

您可以通過使用classList.toggle而不是添加和洗掉來簡化代碼。Toggle 采用第二個引數“force”，當為 true 時應用該類，當為 false 時將其移除。

您還需要使用 querySelectorAll 來獲取表單中的輸入串列，然后使用 forEach 遍歷它們：

function checkEmpty() {
  document.querySelectorAll("#form-div .input").forEach(item => {
    item.classList.toggle("error-class", !item.value);
  });
}

您也可以考慮使用內置的偽類:valid和:invalid. 有關詳細資訊，請參閱此相關問題：

Javascript onchange 驗證，以便 :valid 和 :invalid CSS 選擇器作業

片段

查看并運行代碼段以了解其作業原理。該代碼段包含額外的代碼，以防止在checkEmpty()回傳 false 時提交表單，指示無效欄位。

function checkEmpty() {
  let valid = true;
  document.querySelectorAll("#form-div .input").forEach(item => {
    if (!item.value) valid = false;
    item.classList.toggle("error-class", !item.value);
  });
  return valid;
}

document.querySelector("#form-div form")
  .addEventListener("submit", function(event) {
      if (!checkEmpty()) {
        event.preventDefault();
        console.log("form submit cancelled");
        return;
      }
      console.log("form submitted");
});

button.click(); //test

.error-class {
  border-color: red;
}

<div id="form-div">
  <form action="#" method="POST" onsubmit="return checkEmpty()">
    <input type="text" class="input" placeholder="First Name" /> </label>
    <input type="password" class="input" placeholder="Password" /> </label><br>
    <input type="submit" class="button" id="button" value="CLAIM YOUR FREE TRIAL" /><br>
  </form>
</div>

標籤：javascript形式

上一篇：創建多個動態輸入emangular

下一篇：如何使用Symfony為表單中的每個欄位設定值？