表单全输入框keyup验证问题：需全部字段完成才显示提示

要实现所有9个输入框都填写完成并通过验证后才显示「Validated」消息，你需要修改JavaScript逻辑，每次触发keyup时检查全部输入字段的验证状态，而不是只检查当前输入框。

修改后的完整代码 #

HTML

<form action="">
  <div class="participants-data">
    <div class="form-content-holder">
      <div class="js-form-content form-content">
        <div class="participant-index">Participant</div>
        <div class="input-holder">
          <input type="text" name="firstName" fieldName="firstName" class="input-participant-data" required>
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" class="input-participant-data" required>
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" class="input-participant-data" required>
          <label for="">Email</label>
        </div>
      </div>
      <div class="js-form-content form-content">
        <div class="participant-index">Participant</div>
        <div class="input-holder">
          <input type="text" name="firstName" fieldName="firstName" class="input-participant-data" required>
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" class="input-participant-data" required>
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" class="input-participant-data" required>
          <label for="">Email</label>
        </div>
      </div>
      <div class="js-form-content form-content">
        <div class="participant-index">Participant</div>
        <div class="input-holder">
          <input type="text" name="firstName" fieldName="firstName" class="input-participant-data" required>
          <label for="">First Name</label>
          <input type="text" name="lastName" fieldName="lastName" class="input-participant-data" required>
          <label for="">Last Name</label>
          <input type="email" name="email" fieldName="email" class="input-participant-data" required>
          <label for="">Email</label>
        </div>
      </div>
    </div>
  </div>
  <div class="message d-none">Validated</div>
</form>

CSS

.d-none {
  display: none;
}

JavaScript

const inputs = document.querySelectorAll('input');
const message = document.querySelector('.message');

inputs.forEach(input => {
  input.addEventListener('keyup', () => {
    // 检查所有输入框是否都通过验证
    const allValid = Array.from(inputs).every(input => input.checkValidity());
    
    if (allValid) {
      message.classList.remove('d-none');
    } else {
      message.classList.add('d-none');
    }
  });
});

关键修改说明 #

1. 添加required属性：给每个输入框加上required，确保空输入会触发验证失败，强制用户必须填写所有字段。
2. 全局验证逻辑：
   • 使用Array.from(inputs)将NodeList转换为数组，方便调用every()方法
   • every()会遍历所有输入框，只有当全部输入的checkValidity()返回true时，allValid才为true
   • 根据allValid的状态控制消息的显示/隐藏，确保只有所有字段都通过验证时才显示「Validated」

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