Workday表单自动填充后仍提示‘Value is required’问题解决

问题原因 #

Workday的表单基于前端框架构建，这类框架不会直接监听DOM元素的value属性变化，而是依赖用户输入事件（如input、change）来同步内部状态。直接修改DOM的value或设置value属性，框架的内部状态仍会保持为空，导致点击保存时验证失败。

解决方案 #

模拟真实用户的操作流程：聚焦输入框 → 设置值 → 触发输入事件 → 失焦。这样能让框架感知到值的变化，同步更新内部状态。

修改后的代码 #

const lastNameInput = document.querySelector('[data-automation-id="legalNameSection_lastName"]');
if (lastNameInput) {
  // 模拟用户点击输入框聚焦
  lastNameInput.focus();
  // 设置输入框的值
  lastNameInput.value = 'Last Name';
  // 触发input事件，通知框架值已更新（关键步骤）
  lastNameInput.dispatchEvent(new Event('input', { bubbles: true }));
  // 可选：触发change事件，适配部分依赖该事件的表单逻辑
  lastNameInput.dispatchEvent(new Event('change', { bubbles: true }));
  // 模拟用户离开输入框失焦
  lastNameInput.blur();

  await delay(1000);
  console.log(lastNameInput);
}

额外说明 #

• 移除了不必要的lastNameInput.setAttribute('value', 'Last Name')：setAttribute修改的是DOM元素的初始值属性，而非当前输入值，对表单状态无意义。
• 如果上述代码仍不生效，可以尝试使用InputEvent替代Event，更贴近原生输入行为：

  lastNameInput.dispatchEvent(new InputEvent('input', {
    bubbles: true,
    cancelable: true,
    data: 'Last Name'
  }));
  

• 部分复杂表单可能需要额外触发blur或focusout事件，确保框架完成状态同步。

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