实现表单必填项未填写时禁用提交按钮，填完仍禁用如何修复

核心问题分析 #

• 重复定义sendText函数：JS中同名函数后面的定义会覆盖前面的，最终你的代码只校验了comment单个字段，完全没有同时校验三个必填项的逻辑，不符合需求。
• 未绑定输入事件：你定义的函数没有和三个输入框的输入动作关联，函数不会自动执行，按钮状态永远停留在初始禁用状态。
• 额外问题：判断值长度时没有去除首尾空格，用户输入空格会被误判为已填写。

修复后的JS代码 #

const submitBtn = document.getElementById('submit');
const firstName = document.getElementById('first-name');
const email = document.getElementById('email');
const comment = document.getElementById('comment');

// 统一校验三个必填项
function checkFormValid() {
  // trim()去除首尾空格，避免空字符被判定为有效输入
  const allFilled = firstName.value.trim().length > 0 
    && email.value.trim().length > 0 
    && comment.value.trim().length > 0;
  submitBtn.disabled = !allFilled;
}

// 给三个必填项绑定输入事件，每次内容变化都触发校验
firstName.addEventListener('input', checkFormValid);
email.addEventListener('input', checkFormValid);
comment.addEventListener('input', checkFormValid);

HTML语法修复建议 #

你的HTML存在多处语法错误，建议同步修正避免其他异常：

• <fieldset div="contact">修改为<fieldset id="contact">（div不是fieldset的合法属性）
• 拼写错误<lable>改为<label>、<ption value="10">改为<option value="10">
• 删除多余的无效闭合标签：重复的</form>、和表单结构不匹配的</h3>、</nav>
• 调整表格嵌套逻辑：tr标签内直接嵌套fieldset不符合HTML表格规范，建议把表单内容放在td标签内或者不使用表格布局。

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