如何仅验证表单的部分字段集？分步表单验证求助

开发了一个包含两个fieldset的分步表单，每个fieldset各有必填输入框。需求是点击进入第二步时仅验证第一个fieldset，但当前调用checkValidity()时整个表单仍被验证，出现所有无效字段的提示，需要纯ES6解决方案。

问题原因 #

• 核心问题：按钮默认触发表单提交验证
  你页面中的Continue按钮未指定type="button"，浏览器会默认将其识别为type="submit"按钮。点击这类按钮时，浏览器会自动触发整个表单的原生提交验证，遍历所有必填字段校验，完全覆盖了你手动调用的checkValidity()逻辑。
• 次要问题：checkValidity()仅返回布尔值，不会触发原生错误提示
  当前验证逻辑只判断字段是否有效，但未主动触发浏览器的错误提示弹窗，用户无法直观看到哪里填错了。

解决方案 #

1. 修改按钮类型，阻止默认表单验证 #

给Continue按钮添加type="button"属性，避免浏览器自动触发表单提交验证：

<button type="button" onclick="continueToStep(2)">Continue</button>

2. 优化验证逻辑，仅校验当前步骤字段并触发提示 #

调整validateFieldset函数，只针对当前激活的fieldset内的必填字段验证，并用reportValidity()触发原生错误提示：

function validateFieldset() {
  const inputElements = document.querySelectorAll(`fieldset.active input[required]`);
  let isValid = true;
  Array.from(inputElements).forEach(element => {
    if (!element.checkValidity()) {
      element.reportValidity(); // 弹出原生错误提示
      isValid = false;
    }
  });
  return isValid;
}

3. 简化步骤切换逻辑 #

验证函数已通过active类定位当前字段集，continueToStep无需再传递当前步骤参数：

function continueToStep(nextStep) {
  const fieldsetValid = validateFieldset();
  if (fieldsetValid) {
    goToStep(nextStep);
  }
}

完整修正代码 #

HTML #

<form>
  <fieldset>
    <legend>Your name</legend>
    <p>
      <label for="prename">Prename (required)</label><br />
      <input type="text" id="prename" name="prename" required />
    </p>
    <p>
      <label for="surname">Surname (required)</label><br />
      <input type="text" id="surname" name="surname" required />
    </p>
    <p>
      <button type="button" onclick="continueToStep(2)">Continue</button>
    </p>
  </fieldset>
  <fieldset>
    <legend>Your contact information</legend>
    <p>
      <label for="email">Email (required)</label><br />
      <input type="email" id="email" name="email" required />
    </p>
    <p>
      <label for="phone">Phone</label><br />
      <input type="tel" id="phone" name="phone" />
    </p>
    <button type="button" onclick="goToStep(1)">Go back</button>
    <button type="submit">Submit</button>
  </fieldset>
</form>

CSS #

fieldset {
  display: none;
}
fieldset.active {
  display: block;
}

JavaScript #

let fieldsetElements;

function validateFieldset() {
  const inputElements = document.querySelectorAll(`fieldset.active input[required]`);
  let isValid = true;
  Array.from(inputElements).forEach(element => {
    if (!element.checkValidity()) {
      element.reportValidity();
      isValid = false;
    }
  });
  return isValid;
}

function goToStep(step) {
  Array.from(fieldsetElements)
    .filter(element => element.classList.contains("active"))
    .forEach(element => element.classList.remove("active"));
  fieldsetElements[step - 1].classList.add("active");
}

function continueToStep(nextStep) {
  const fieldsetValid = validateFieldset();
  if (fieldsetValid) {
    goToStep(nextStep);
  }
}

document.addEventListener("DOMContentLoaded", () => {
  fieldsetElements = document.getElementsByTagName("fieldset");
  goToStep(1);
});

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