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

Question

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

我从 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>

所以我的目标是，用户尝试提交表单而不填写他们的名字，弹出一条错误消息说 "Name is required"。

Answer 1

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

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

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

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

在我看来，您有两种选择： 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>

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

JS/HTML my form submit button isn't showing an error message when the form is incomplete

html

javascript

form-submit