如何解决动态表单行级非侵入式客户端验证失效问题？

核心问题是动态生成的表单行复用了相同的ID——DOM要求ID必须唯一，getElementById只会返回第一个匹配的元素，所以你操作第一行时，其他行的提示元素根本没被正确定位，看起来像是验证状态被清除了。

修改步骤： #

1. 替换HTML中重复的ID为类名，避免冲突
2. 让验证函数接收当前输入元素作为参数，通过DOM关系定位当前行的提示元素
3. 动态生成每一行时保持结构一致

修改后的代码： #

JavaScript

function dob_police(inputElement) {
    const age = inputElement.value;
    // 定位当前输入所在行的提示元素
    const alertElement = inputElement.closest('.form-group').querySelector('.age-alert');

    if (age < 20) {
        alertElement.style.color = 'red';
        alertElement.textContent = 'Age must be 20 above';
    } else {
        alertElement.style.color = 'green';
        alertElement.textContent = '✓';
    }
}

HTML（动态生成的每一行结构）

<div class="form-group">
    <label>Age</label>
    <input type="number" class="form-control form-control-sm age-input" name="age[]" required onkeyup="dob_police(this)" value="<?php echo $row['age']; ?>">
    <small class="age-alert"></small>
</div>

额外说明： #

• name="age[]"确保后端（如PHP）能接收动态生成的多个年龄值，以数组形式处理
• 使用closest('.form-group')精准定位当前输入所在的表单组，保证验证提示仅作用于当前行
• 用textContent替代innerHTML更安全，避免不必要的HTML注入风险

内容的提问来源于stack exchange，提问作者akiee