验证多个字段并显示消息答案

【问题标题】：Validate multiple fields and showing a message验证多个字段并显示消息
【发布时间】：2021-08-29 22:50:11
【问题描述】：

我有一个非常简单的表格。我想显示消息“请说点什么！我想听听你的意见！”当人们将字段留空时，在我的网站上。怎么办？

<form action="/action_page.php">
  <label for="name">Name</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email</label>
  <input type="text" id="email" name="email"><br><br>
  <label for="comment">Comment</label>
  <input type="text" id="comment" name="comment"><br><br>
  <input type="submit" value="Submit">
</form>

【问题讨论】：

这两个答案是否帮助您解决了您的问题？如果有，请标记一个作为答案。谢谢

标签： javascript jquery validation

【解决方案1】：

这是一种方法。您从按钮收听提交，当发生这种情况时，您可以使用event.preventDefault() 停止提交表单，因此您可以检查值。我们在一个名为check 的数组中设置表单字段，因此我们可以遍历它们并检查它们的值。如果该值为空，我们会在 error 数组中记下它。最后，我们检查是否有错误，如果有，则显示警报。如果没有，请允许表单提交。

document.querySelector('input[type=submit]').addEventListener('click', function(e) {
  e.preventDefault(); // stop the form from submitting
  let form = document.querySelector('form');
  let check = ['name', 'email', 'comment'];
  let error = [];
  check.forEach(field => {
    if (form.querySelector('#' + field).value.trim() === '') {
      error.push(field);
    }
  })

  if (error.length > 0) {
    alert('Please say something! I want to hear from you! The following fields are missing information: ' + error.join(", "));
  } else {
    form.submit();
  }


})

<form action="/action_page.php">
  <label for="name">Name</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email</label>
  <input type="text" id="email" name="email"><br><br>
  <label for="comment">Comment</label>
  <input type="text" id="comment" name="comment"><br><br>
  <input type="submit" value="Submit">
</form>

【讨论】：

【解决方案2】：

将required 属性添加到您的输入并将novalidate 属性添加到表单（这样我们就可以使用我们自己的验证）。然后，使用form.checkValidity()检查是否所有字段都已填写。

document.querySelector('form').addEventListener("submit", function(e) {
  if (!this.checkValidity()) {
    document.querySelector('#error').style.display = 'block';
    e.preventDefault();
  }
})

#error {
  display: none;
  color: red;
}

<form action="/action_page.php" novalidate>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required><br><br>
  <label for="email">Email</label>
  <input type="text" id="email" name="email" required><br><br>
  <label for="comment">Comment</label>
  <input type="text" id="comment" name="comment" required><br><br>
  <input type="submit" value="Submit">
</form>
<p id="error">Please say something! I want to hear from you!</p>

【讨论】：