如何优化代码为两个表单输入字段添加onvalid属性？

数据老陈

2026-8-10

问题分析与修复方案

错误点说明

操作对象错误：document.querySelectorAll()返回的是NodeList元素集合，你在循环里直接调用addAttribute.setAttribute()，这是在操作集合本身而非集合里的单个元素，应该用addAttribute[i]访问每个元素。
事件名拼写错误：表单验证的触发事件是oninvalid，不是onvalid，拼写错误导致事件无法被正确触发。

修复后的代码

方案1：修正原循环写法

const inputFields = document.querySelectorAll("#form-field-name, #form-field-escort");
for (let i = 0; i < inputFields.length; i++) {
    inputFields[i].setAttribute("oninvalid", "this.setCustomValidity('Bitte füllen Sie dieses Feld aus.');");
    // 补充：输入时重置自定义验证信息，避免触发错误后输入正确内容仍提示错误
    inputFields[i].setAttribute("oninput", "this.setCustomValidity('');");
}

方案2：更现代的事件监听器写法（推荐）

const inputFields = document.querySelectorAll("#form-field-name, #form-field-escort");
inputFields.forEach(field => {
    field.addEventListener('invalid', function() {
        this.setCustomValidity('Bitte füllen Sie dieses Feld aus.');
    });
    // 重置验证信息
    field.addEventListener('input', function() {
        this.setCustomValidity('');
    });
});