如何验证带required标签的关联文本输入框提交时非空？

首先得提个小细节：你当前的HTML里，label标签的for属性值和对应input的id没对上（比如label的for="lblFirstName"对应input的id="txtFirstName"），这会导致label和输入框无法正确关联，不仅影响验证逻辑，也不符合HTML规范，建议先把label的for属性改成对应input的id，比如for="txtFirstName"，这样后续操作更靠谱。

下面给你两种验证方案，按需选择：

方案一：修正label关联后的验证（推荐） #

这个方案基于label和input正确关联的前提，步骤很简单：

先调整你的HTML（修正关联） #

<div class="col-md-12">
  <label class="required" for="txtFirstName">First Name:</label>
  <input id="txtFirstName" type="text"/>
  <label class="required" for="txtLastName">Last Name:</label>
  <input id="txtLastName" type="text"/>
  <!-- 给提交按钮加个id，方便我们获取它 -->
  <button id="submitBtn">提交</button>
</div>

然后写验证的JavaScript代码 #

// 监听提交按钮的点击事件
document.getElementById('submitBtn').addEventListener('click', function(e) {
  // 先阻止表单默认提交，等验证完再说
  e.preventDefault();
  
  let isFormValid = true;
  // 找到所有带required类的标签
  const requiredLabels = document.querySelectorAll('.required');
  
  // 逐个检查每个必填字段
  requiredLabels.forEach(label => {
    // 通过label的for属性找到对应的输入框
    const inputId = label.getAttribute('for');
    const targetInput = document.getElementById(inputId);
    
    if (targetInput) {
      // 去掉输入内容首尾的空白，再检查是否为空
      if (!targetInput.value.trim()) {
        isFormValid = false;
        // 给用户提示，这里用alert举例，你也可以改成高亮输入框或者显示错误文本
        targetInput.style.borderColor = 'red';
        alert(`${label.textContent.trim().replace(':', '')} 不能为空哦！`);
      } else {
        // 验证通过的话，恢复输入框的默认样式
        targetInput.style.borderColor = '';
      }
    }
  });
  
  // 如果所有必填字段都没问题，再执行提交逻辑
  if (isFormValid) {
    // 这里可以写实际的提交代码，比如form.submit()
    alert('所有必填项都填好了，准备提交！');
  }
});

方案二：不修正label关联的验证（通过DOM遍历找输入框） #

如果暂时不想改label的属性，也可以通过DOM遍历找到label旁边的输入框，代码如下：

JavaScript代码 #

document.getElementById('submitBtn').addEventListener('click', function(e) {
  e.preventDefault();
  
  let isFormValid = true;
  const requiredLabels = document.querySelectorAll('.required');
  
  requiredLabels.forEach(label => {
    // 找到label后面紧邻的元素，跳过空白节点，直到找到input
    let targetInput = label.nextElementSibling;
    while (targetInput && targetInput.nodeType !== 1) {
      targetInput = targetInput.nextElementSibling;
    }
    
    // 确认找到的是input元素
    if (targetInput && targetInput.tagName === 'INPUT') {
      if (!targetInput.value.trim()) {
        isFormValid = false;
        targetInput.style.borderColor = 'red';
        alert(`${label.textContent.trim().replace(':', '')} 不能为空哦！`);
      } else {
        targetInput.style.borderColor = '';
      }
    }
  });
  
  if (isFormValid) {
    alert('验证通过，即将提交！');
  }
});

小提示 #

• 两种方案都先阻止了默认提交行为，确保验证完成后再决定是否提交
• 错误提示的方式可以自己调整，比如在输入框下方显示红色文字，比alert更友好
• 优先用方案一，因为label和input正确关联是符合规范的，也更利于屏幕阅读器等辅助工具使用

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