如何在form的onsubmit事件中通过input名称修改关联<label>的颜色？

<form id="myForm">
  <label id="labelForInput" for="inputField">LABEL</label>
  <input id="inputField">
  <input id="submitButton" type="submit" value="Send"/>
</form>

<script>
  document.getElementById("inputField").addEventListener("click", clickHandler);

  function clickHandler(event) {
      // 点击input时，label颜色变为红色:
      event.srcElement.labels[0].style.color='red';
  }

  document.getElementById("myForm").addEventListener( "submit", submitHandler );

  function submitHandler(event) {
      // 点击提交按钮时，如何修改label颜色为绿色？
      // **???** .style.color='green';
      return false;
  }
</script>

补充说明：实际场景中我不知道的id和名称，仅知道的名称，且是通过for属性与绑定的。我需要循环input名称数组，根据条件修改对应的颜色：

const fieldNames=['form_name','form_email','form_message'];
const fieldConds=[true, false, true];

function submitHandler(event) {
  fieldConds.forEach( (value, idx) => { 
            if (!value) { ... 修改颜色 ... }
  });
}

我期望找到类似click事件中event.srcElement.labels[0]的路径，但onsubmit事件对象似乎仅包含表单的字符串表示，没有对应的input字段属性。

解决方案 #

单个input的修改方式 #

在onsubmit事件里，你可以通过表单对象直接获取目标input，再复用labels属性的逻辑，和click事件里的写法类似：

function submitHandler(event) {
  // 方式1：通过querySelector获取input
  const input = event.target.querySelector('#inputField');
  input.labels[0].style.color = 'green';

  // 方式2：利用表单的元素引用直接访问
  // event.target.inputField.labels[0].style.color = 'green';
  
  return false;
}

批量处理场景（按input名称循环） #

针对你实际的批量需求，用表单的elements属性根据input名称获取元素，再操作关联label即可：

const fieldNames=['form_name','form_email','form_message'];
const fieldConds=[true, false, true];

function submitHandler(event) {
  const form = event.target;
  fieldConds.forEach( (value, idx) => { 
    if (!value) {
      // 根据名称获取对应的input元素
      const input = form.elements[fieldNames[idx]];
      // 确保input存在且有关联label时再修改
      if (input && input.labels.length > 0) {
        input.labels[0].style.color = 'red'; // 替换成你需要的颜色
      }
    }
  });
  return false;
}

核心要点 #

• onsubmit事件的event.target就是当前表单元素，通过它可以直接访问表单内所有控件
• 每个input的labels属性会返回所有和它绑定的label集合，用labels[0]就能拿到第一个关联的label
• 加入存在性判断是为了避免input不存在或无关联label时出现报错

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