表单提交时无法同时展示必填项高亮与投票缺失错误的排查

可能的问题点 #

1. 投票项选择判断逻辑失效 #

你的代码通过document.querySelectorAll(".icon-favorite-filled").length === 0判断是否选中投票项，但这个逻辑成立的前提是：用户点击投票按钮时，按钮会正确添加/移除icon-favorite-filled类。如果存在以下情况，这个判断会出错：

• 点击投票项的事件未正确实现类切换（比如点击后没给选中的按钮加icon-favorite-filled类）
• 类名拼写错误（比如实际用的是icon-favorite-selected而非icon-favorite-filled）
• 选择器范围错误（比如icon-favorite-filled元素不在当前表单内，但你用了全局选择器，导致误判）

2. 错误提示元素未正确获取或初始状态异常 #

• 检查DOM中是否存在.required_fields_market类的元素，若不存在，设置style.display不会有任何效果
• 确认该元素初始状态是display: none，否则即使投票项未选中，错误提示可能本来就是显示状态，或者设置block后被其他样式覆盖

3. 未定义变量导致脚本中断 #

代码中使用了favoriteSightseeingInput但未在提交函数内定义，如果这个变量不存在，浏览器控制台会抛出错误，导致整个提交脚本中断，后续的验证逻辑（包括投票错误提示）都无法执行。

4. 表单提交触发逻辑问题 #

如果提交按钮的type不是submit（比如是button），那么form.addEventListener("submit")不会被触发，此时需要给按钮添加click事件来调用验证逻辑。

修复步骤 #

1. 检查控制台错误
   打开浏览器开发者工具的「Console」面板，提交表单时查看是否有变量未定义、选择器找不到元素等报错，优先修复这些致命错误。

2. 验证投票项的类切换逻辑
   点击投票按钮后，在「Elements」面板查看按钮的类列表，确认选中的按钮是否带有icon-favorite-filled类。如果没有，修复点击事件的类切换代码，示例：

// 假设投票按钮有共同类名vote-btn
document.querySelectorAll(".vote-btn").forEach(btn => {
  btn.addEventListener("click", function() {
    // 移除所有按钮的选中类
    document.querySelectorAll(".vote-btn").forEach(b => b.classList.remove("icon-favorite-filled"));
    // 给当前点击的按钮添加选中类
    this.classList.add("icon-favorite-filled");
  });
});

3. 确保错误提示元素正常
   确认.required_fields_market元素存在，并且初始CSS设置为display: none;，可以在控制台执行document.querySelector(".required_fields_market")，返回结果应为对应的DOM元素而非null。

4. 补全未定义变量
   在提交函数开头添加favoriteSightseeingInput的定义，比如：

const favoriteSightseeingInput = document.getElementById("对应的输入框ID");

5. 确认提交按钮类型
   检查提交按钮的HTML代码，确保type="submit"：

<button type="submit">提交</button>

如果是type="button"，则需要给按钮添加点击事件来触发验证：

document.getElementById("submitBtn").addEventListener("click", function() {
  // 手动触发表单提交，或直接调用你的验证逻辑
  form.dispatchEvent(new Event("submit"));
});

内容的提问来源于stack exchange，提问作者D'arganatan