如何实现点击事件验证必填字段，未填则禁止添加表格行？

问题根源 #

之前的写法存在两个核心问题：

• 点击事件同时调用验证和添加函数，不管验证是否通过都会执行添加，而且表单默认提交行为会导致页面刷新，刚添加的行直接被重置
• 使用onsubmit时未阻止默认提交，页面刷新后所有按钮状态异常，看起来像是失效

具体修改步骤 #

1. 重构验证函数，带返回值并阻止默认行为

让验证函数负责检查必填字段，只有通过才触发添加逻辑，同时阻止表单提交导致的页面刷新：

function validateForm(event) {
  // 必须先阻止表单默认提交
  event.preventDefault();

  // 获取所有必填字段的值（根据你的实际字段调整）
  const taskName = document.getElementById('taskName').value.trim();
  const taskDesc = document.getElementById('taskDesc').value.trim();

  // 验证逻辑：空值直接提示并返回
  if (!taskName) {
    alert('请填写任务名称');
    return false;
  }
  if (!taskDesc) {
    alert('请填写任务描述');
    return false;
  }

  // 验证通过，执行添加行操作
  myFunction();
  // 可选：添加完成后关闭模态框
  document.getElementById('taskModal').style.display = 'none';
  return true;
}

2. 绑定表单的onsubmit事件

把模态框里的表单绑定onsubmit事件，不要给按钮单独加onclick，避免逻辑冲突：

<!-- 模态框内的表单 -->
<form id="taskForm" onsubmit="return validateForm(event)">
  <div>
    <label>任务名称 *</label>
    <input type="text" id="taskName" />
  </div>
  <div>
    <label>任务描述 *</label>
    <textarea id="taskDesc"></textarea>
  </div>
  <!-- 其他必填字段 -->
  <button type="submit">添加任务</button>
</form>

3. 确保添加行函数正确获取表单值

修改myFunction，直接从表单元素取数，不依赖表单提交的默认行为：

function myFunction() {
  // 重新获取表单值（避免验证后值被修改）
  const taskName = document.getElementById('taskName').value.trim();
  const taskDesc = document.getElementById('taskDesc').value.trim();

  // 找到Tasks表格并插入新行
  const table = document.getElementById('Tasks');
  const newRow = table.insertRow(-1); // 插入到表格末尾

  // 创建单元格并填充内容
  const cellName = newRow.insertCell(0);
  const cellDesc = newRow.insertCell(1);
  cellName.textContent = taskName;
  cellDesc.textContent = taskDesc;

  // 清空表单，方便下次添加
  document.getElementById('taskForm').reset();
}

额外提示 #

• 可以给必填字段加HTML原生的required属性，做一层基础的前端验证，和JS验证互补
• 不要混用onclick（按钮点击）和onsubmit（表单提交），否则容易出现逻辑混乱
• 如果用Bootstrap这类框架的模态框，记得用框架自带的关闭方法（比如$('#taskModal').modal('hide')），而不是直接改display属性

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