對具有相同ID的多個元素進行文本驗證

Question

我在同一頁面中以多種形式具有相同ID的多個輸入元素。 每個表單具有相同的操作（創建，更新和刪除），用於添加新的團隊名稱，修改團隊名稱或刪除團隊名稱。 我試圖提出一種簡單的文本驗證技術來顯示一條消息，如果該特定形式的文本框為空。 我想到了這一點，它適用於頁面中第一種形式的第一個元素。

    function showProgressOfNameChange(){
    var newName = document.getElementById("newName").value;
     if (newName == null || newName == "") {
       document.getElementById("error").innerHTML = "Name must not be empty";
       document.getElementById("newName").style.backgroundColor = "#ff8";
       return false;
       }
     $("#loading-div-background").show();
 }

但這不適用於同一頁面中id = newName的其他元素。 也許我應該使用getElementsByClass，但不確定如何使它工作...如果我將所有ID更改為唯一，我該如何編寫函數來檢查多個唯一ID？

Answer 1

如您所建議的，您需要使用類而不是ID，因為ID必須是唯一的，然后可以使用getElementsByClassName（）獲取具有所述類的所有元素，然后遍歷返回的元素列表並進行驗證每個項目

function showProgressOfNameChange() {
    var els = document.getElementsByClassName("newName"),
        newName;
    for (var i = 0; i < els.length; i++) {
        newName = els[i].value;
        if (newName == null || newName == "") {
            document.getElementById("error").innerHTML = "Name must not be empty";
            els[i].style.backgroundColor = "#ff8";
            return false;
        }
    }
    $("#loading-div-background").show();
    return true;
}

---

由於您使用jQuery對其進行了標記

function showProgressOfNameChange() {
    var valid = true;
    $('.newName').each(function () {
        if (this.value == null || this.value == "") {
            valid = false;
            $(this).css('background-color', '#ff8');
        }
    })
    $("#loading-div-background").toggle(valid);
    $("#error").toggle(!valid)
    if (!valid) {
        $("#error").html("Name must not be empty");
    }
    return valid;
}

演示： 小提琴