appendChild生成的表单必填项错误消息无法持久显示问题排查

问题描述 #

• 需求：用Vanilla JS实现表单必填字段即时校验，补充Kirby CMS表单仅提交时校验的不足，期望行为：
  1. 必填字段为空时，focusout触发后显示红色下划线样式和错误消息
  2. 样式和消息保持可见，直到字段重新获焦或被填充
  3. 重新获焦后仍留空再失焦，需再次显示样式和消息
• 当前问题：红色下划线样式正常工作，但错误消息仅出现在最后一个失焦的必填字段上，无法为每个字段持久显示错误提示

核心问题分析 #

你只创建了一个错误提示元素reqdPara，DOM中同一个元素只能存在于一个位置。每次调用appendChild(reqdPara)时，会把这个元素从之前的父节点移动到当前字段的父节点，导致只有最后一个触发focusout的字段能显示错误消息。

修正后的实现代码 #

JavaScript #

function reqdCheck() {
  const reqdFields = document.querySelectorAll("main input[required], main textarea[required]");
  
  for (const reqdField of reqdFields) {
    // 为每个字段创建独立的错误提示元素
    const createErrorMsg = () => {
      const reqdPara = document.createElement("p");
      reqdPara.className = "field-error";
      reqdPara.textContent = "This field is required.";
      return reqdPara;
    };

    // 检查当前字段父节点是否已有错误提示
    const getErrorMsg = (parent) => parent.querySelector(".field-error");

    reqdField.addEventListener("focusout", function() {
      if (!reqdField.value.trim()) {
        // 添加错误样式
        reqdField.classList.add("field-error-state");
        // 仅当没有错误提示时才创建并添加
        const parent = reqdField.parentNode;
        if (!getErrorMsg(parent)) {
          parent.appendChild(createErrorMsg());
        }
      } else {
        // 清除错误样式和提示
        reqdField.classList.remove("field-error-state");
        const errorMsg = getErrorMsg(reqdField.parentNode);
        errorMsg && errorMsg.remove();
      }
    });

    reqdField.addEventListener("focusin", function() {
      if (!reqdField.value.trim()) {
        // 切换为聚焦样式
        reqdField.classList.remove("field-error-state");
        reqdField.classList.add("field-focus-empty");
        // 移除错误提示
        const errorMsg = getErrorMsg(reqdField.parentNode);
        errorMsg && errorMsg.remove();
      }
    });

    // 实时监听输入，输入内容后清除错误状态
    reqdField.addEventListener("input", function() {
      if (reqdField.value.trim()) {
        reqdField.classList.remove("field-error-state", "field-focus-empty");
        const errorMsg = getErrorMsg(reqdField.parentNode);
        errorMsg && errorMsg.remove();
      }
    });
  }
}
reqdCheck();

CSS #

input:not([type="submit"]),
textarea {
  border: none;
  border-bottom: 1px solid black;
  display: block;
  width: calc(100% - 40px);
}

input:not([type="submit"]):focus,
textarea:focus {
  outline: none;
  border-bottom: 1px solid orange;
  box-shadow: 0 1px 0 0 orange;
}

/* 空字段聚焦时的样式 */
.field-focus-empty {
  border-bottom: 1px solid orange !important;
  box-shadow: 0 1px 0 0 orange !important;
}

/* 错误状态样式 */
.field-error-state {
  border-bottom: 1px solid red !important;
  box-shadow: 0 1px 0 0 red !important;
}

.field-group {
  margin-bottom: 20px;
}

.field-error {
  color: red;
  line-height: 1;
  margin: 5px 0 0;
}

HTML（修正重复ID问题） #

<main>
  <form id="a2a64e93-2b60-4ad9-9445-ce61f5852594" action="#">
    <div class="field-group">
      <label for="fname">First name:*</label><br>
      <input type="text" id="fname" name="fname" placeholder="John" required>
    </div>
    <div class="field-group">
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" placeholder="Doe">
    </div>
    <div class="field-group">
      <label for="company">Company:</label><br>
      <input type="text" id="company" name="company" placeholder="Acme Ltd">
    </div>
    <div class="field-group">
      <label for="email">Email:*</label><br>
      <input type="email" id="email" name="email" placeholder="john@acme.com" required>
     </div>
    <div class="field-group">
      <label for="message">Message:*</label><br>
      <textarea id="message" name="message" placeholder="Message" required></textarea>
    </div>
    <input type="submit" value="Submit">
  </form>
</main>

优化说明 #

1. 每个字段独立错误元素：为每个必填字段创建专属的错误提示元素，避免DOM节点移动导致的显示问题
2. 用类名代替内联样式：便于维护样式，避免重复的style操作，同时符合代码分离原则
3. 新增input事件监听：用户输入内容时实时清除错误状态，提升交互体验
4. 空值判断优化：使用!reqdField.value.trim()替代原判断，兼容空格输入的无效情况
5. 修正HTML重复ID：原代码中company字段ID与fname重复，会导致label关联失效，已修正

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