单HTML页面多表单jQuery验证失效及scrollIntoView报错排查

问题描述 #

在单个HTML页面中添加了jQuery表单验证函数，但该函数仅能验证第一个表单，其余两个表单提交时会触发API调用并显示Bad Request。控制台日志报错：Uncaught TypeError: Cannot read properties of undefined (reading 'scrollIntoView')，疑问是否因表单处于独立div中导致。

错误原因分析 #

• scrollIntoView报错根源：代码中尝试执行$( "#locations" )[0].scrollIntoView()，但目标元素（id为locations的表格）被注释掉，页面中不存在该DOM节点，导致$("#locations")[0]为undefined，调用方法时抛出TypeError，可能中断部分JavaScript执行流程。
• 验证仅生效第一个表单的原因：当前验证逻辑仅针对<input>元素做空值检查，但第二个删除表单、第三个更新颜色表单使用的是<select>元素，验证代码未覆盖这类元素，提交时不会触发验证拦截，直接发送请求；而后端接口因参数未正确选择（如select未选有效选项）返回Bad Request。

修复步骤 #

1. 修复scrollIntoView报错 #

两种处理方式任选其一：

• 移除无效代码：直接删除或注释掉目标元素不存在的滚动代码：

// 移除以下无效代码，因为id为locations的元素已被注释
// $( "#locations" )[0].scrollIntoView();

• 添加存在性判断：确保元素存在后再调用方法，避免报错：

const locationsElement = $("#locations")[0];
if (locationsElement) {
  locationsElement.scrollIntoView();
}

2. 完善表单验证逻辑，覆盖select元素 #

修改验证代码，同时检查<input>和<select>的空值情况，包括select的默认禁用选项：

$(document).ready(function() {
    $('.container').submit(function(e) {
        // 同时筛选input和select元素，检查空值或未选有效选项
        var emptyFields = $(this).find("input, select").filter(function() {
            if (this.tagName === 'SELECT') {
                // 判断select是否未选择有效选项（默认禁用选项被选中）
                return this.value === "" || $(this).find("option:selected").is(":disabled");
            }
            // 判断input是否为空
            return this.value === "";
        });

        if (emptyFields.length > 0) {
            e.preventDefault();
            alert("Cannot submit empty field");
        }
    });
});

3. 额外优化建议 #

• HTML中存在重复id（如new_cat、confirm），id必须唯一，建议改为class或设置唯一id，避免DOM选择器异常。
• 为第一个表单的input添加id，统一元素选择逻辑。

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