JS/HTML 我的表单提交按钮在表单不完整时不显示错误消息

Question

只学习了几个月，试图学习基础知识。我创建了一个表单，我尝试输入 javascript 以在单击提交按钮时显示错误消息，但信息不完整。到目前为止，我只在用户名字段上对此进行了测试，但是当我单击提交但将用户名留空时，我的消息“需要名称”没有显示。

我从 youtube 视频中遵循了这段代码，据我所知，它看起来还不错！我也将 js 放入了语法验证器中。我最初在 div 上有 ID 而不是输入标签，所以改变了这个。

const name = document.getElementById('name')

formZ.addEventListener('submit', (e) => {
  let messages = []
  if (name.value === '' || name.value == null) {
    messages.push('Name is required')
  }

  if (messages.length > 0) {
    e.preventDefault()
    error.innerText = messages.join(', ')
  }
})

<div id="errorMessage"> </div>

<form action="/" method="GET" id="formZ">
  <div id="form">
    <div>
      <input type="text" placeholder="Username" required="" class="inputField" id="name">
    </div>
    <div id="submitArea">
      <button type="submit" class="submitButton">Submit</button>
    </div>
  </div>
</form>

所以我的目标是，用户尝试提交表单而不填写他们的姓名，弹出一条错误消息说“需要姓名”。

Answer 1

您没有得到预期的结果，因为名称字段是required，这意味着如果该字段留空，则不会发生提交。

由于您在提交时所做的唯一检查是name 不为空或不为空，并且当name 为空时，浏览器会自动阻止用户提交表单，因此您看不到错误消息。

我添加了当用户输入字符串a 时添加错误的条件。尝试输入a并提交，您将看到预期的结果。

另外，您的代码中缺少一些变量（error 和 formZ），所以我也添加了它们。

在我看来，有 2 个选项供您选择： 1. 添加不同的错误案例，不只检查空值。 2. 不要使用required 属性。

无论如何，我建议您阅读有关 form validation 的信息，它可能会对您有所帮助。

const name = document.getElementById('name');
const error = document.getElementById('errorMessage');
const formZ = document.getElementById('formZ');

formZ.addEventListener('submit', (e) => {

  let messages = [];
  if (name.value === '' || name.value == null || name.value === 'a') {
    messages.push('Name is required');
  }

  if (messages.length > 0) {
    e.preventDefault()
    error.innerText = messages.join(', ')
  }
})

<div id="errorMessage"> </div>

<form action="/" method="GET" id="formZ">
  <div id="form">
    <div>
      <input type="text" placeholder="Username" required="" class="inputField" id="name">
    </div>
    <div id="submitArea">
      <button type="submit" class="submitButton">Submit</button>
    </div>
  </div>
</form>