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;
}

演示：Fiddle

对具有相同id的多个元素进行文本验证

1 个答案: