JS设置登录表单输入值后提交仍提示「此字段为必填项」问题

问题原因 #

直接通过element.value = xxx设置输入框值时，仅修改了DOM元素的属性，但没有触发浏览器表单验证（或页面自定义验证逻辑）依赖的input/change事件，导致验证系统无法识别输入框已被填充，依然判定字段为空。

解决方案 #

设置输入框值后，手动触发input和change事件，让验证系统感知到值的变化：

修改后的代码 #

// 获取用户名输入框元素
const usernameInput = document.getElementById("username");
// 设置输入框值
usernameInput.value = chatUsername; // 示例值：afubauirafa

// 触发input事件，通知表单值已更新
usernameInput.dispatchEvent(new Event('input'));
// 可选：触发change事件，确保所有监听逻辑都能捕获到值变更
usernameInput.dispatchEvent(new Event('change'));

// 登录按钮点击事件（无需再手动修改aria-invalid，验证状态会自动更新）
const loginButton = document.querySelector(".rcx-button");
loginButton.addEventListener("click", function() {
    // 如有需要可添加其他逻辑，比如聚焦输入框
    usernameInput.classList.add("focus-visible");
});

补充说明 #

• 如果页面使用了React、Vue等前端框架，直接操作DOM修改value会绕过框架的状态管理，此时应该优先使用框架提供的状态更新方法（比如React的setState、Vue的v-model绑定）来设置输入框值。
• 检查HTML输入框是否存在required属性（用户提供的HTML中未显示），若存在，确保设置的chatUsername不是空字符串或无效值。

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