如何在不使用<form>标签的情况下实现input字段必填验证？

你遇到的问题很常见——HTML5的required属性确实需要依托<form>标签的原生提交机制才能生效，不过不用大幅修改现有代码，我们可以通过JavaScript来实现必填校验，下面是两种简单可行的方法：

方法1：手动编写校验逻辑（灵活可控） #

这种方法适合你需要自定义提示样式或逻辑的场景，不用动现有DOM结构，只需要加一段JS代码：

假设你的必填输入框都标记了class="required"，提交按钮的ID是submit-btn，可以这么写：

// 监听提交按钮点击事件
document.getElementById('submit-btn').addEventListener('click', function(event) {
  let isFormValid = true;
  // 获取所有必填字段
  const requiredFields = document.querySelectorAll('.required');

  requiredFields.forEach(field => {
    // 检查字段是否为空（去除首尾空格）
    if (!field.value.trim()) {
      isFormValid = false;
      // 可以给字段加错误样式，比如边框变红
      field.style.borderColor = '#ff4444';
      // 自定义提示信息
      alert(`请填写${field.getAttribute('name') || '必填字段'}`);
    } else {
      // 清除错误样式
      field.style.borderColor = '';
    }
  });

  // 如果校验不通过，阻止后续提交逻辑
  if (!isFormValid) {
    event.preventDefault();
    return false;
  }

  // 校验通过，执行你原来的提交逻辑（比如AJAX请求）
  console.log('所有必填字段已填写，开始提交');
});

方法2：利用HTML5约束校验API（原生简洁） #

如果你想复用浏览器原生的校验提示，不用自己写弹窗，可以用checkValidity()和reportValidity()方法，同样不需要<form>标签：

document.getElementById('submit-btn').addEventListener('click', function(event) {
  let isFormValid = true;
  // 选中所有带required属性的输入框
  const requiredFields = document.querySelectorAll('input[required]');

  requiredFields.forEach(field => {
    if (!field.checkValidity()) {
      isFormValid = false;
      // 弹出浏览器原生的必填提示
      field.reportValidity();
    }
  });

  if (!isFormValid) {
    event.preventDefault();
    return false;
  }

  // 执行原有提交逻辑
});

额外说明 #

如果你的代码加了<form>后无法运行，大概率是因为<form>的默认提交行为（页面跳转）和你现有JS逻辑（比如AJAX提交）冲突了。如果之后想尝试用原生required，可以给<form>标签加上onsubmit="return false"，或者在JS提交逻辑里调用event.preventDefault()阻止默认跳转，这样既保留required的校验，又不影响原有代码运行。

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