如何选中form表单内所有input元素 实现无填写时触发alert提醒

核心逻辑 #

• 绑定表单提交事件
• 批量校验所有答题输入框的内容
• 存在空值时阻止提交并弹出alert

可直接复用的代码 #

HTML表单结构示例 #

<form id="triviaForm">
  <!-- 每个问题的输入框都加上class="trivia-input" -->
  <div>
    <p>问题1：xxxxxx？</p>
    <input type="text" class="trivia-input" name="q1">
  </div>
  <div>
    <p>问题2：xxxxxx？</p>
    <input type="text" class="trivia-input" name="q2">
  </div>
  <!-- 可无限新增问题输入框，统一加trivia-input类即可 -->
  <button type="submit">提交答案</button>
</form>

JS逻辑代码 #

直接放到页面的<script>标签末尾即可生效：

const triviaForm = document.getElementById('triviaForm');

triviaForm.addEventListener('submit', function(e) {
  // 选取所有答题输入框
  const allInputs = document.querySelectorAll('.trivia-input');
  let isEmptyExist = false;

  // 遍历校验（自动去除输入框前后空格，避免用户只打空格提交）
  allInputs.forEach(input => {
    if (input.value.trim() === '') {
      isEmptyExist = true;
    }
  })

  if (isEmptyExist) {
    e.preventDefault(); // 阻止表单默认提交
    alert('请完成所有问题的作答后再提交~');
  }
})

自定义调整说明 #

• 如果需要指定特定输入框校验，修改querySelectorAll的选择器即可
• 可以修改alert内的文本为你需要的提示内容
• 如果需要定位到具体未填写的问题，可在遍历到空值时记录对应问题内容，放到alert里提示

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