为什么我的 javascript 表单验证不起作用？

Question

我的 JS 表单验证没有打印出错误消息，它似乎忽略了阻止默认值。

我已经多次查看代码，似乎无法找到错误。

HTML：

<form id="form">
  <div>
    <label for="firstname">First Name</label>
    <input id="firstname" name="firstname" type="text" />

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe" />

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com" />

    <label for="comment">Comment:</label>
    <textarea id="comment" name="comment" placeholder="Write something.." style="height:200px;  width: 100%"></textarea>

    <button type="submit">Submit</button>
  </div>
</form>

Javascript：

const firstname = document.getElementById("firstname")
const lastname = document.getElementById("lastname")
const email = document.getElementById("email")
const comment = document.getElementById("comment")
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
form.addEventListener('submit', (e) => {
  let messages = []
  if (firstname.value === '' || firstname.value == null) {
    messages.push('Name is required')
  }
  if (messages.length > 0) {
    e.preventDefualt()
    errorElement.innerText = messages.join(', ')
  }
})

没有错误消息，但我希望它显示我在表单上方设置的 js 错误消息。

Answer 1

这是一个错字错误。 设置e.preventDefault()而不是e.preventDef**ual**t() 。 你也错过了错误 div 来显示错误。

 const firstname = document.getElementById("firstname") const lastname = document.getElementById("lastname") const email = document.getElementById("email") const comment = document.getElementById("comment") const form = document.getElementById('form') const errorElement = document.getElementById('error') form.addEventListener('submit', (e) => { let messages = [] if (firstname.value === '' || firstname.value == null) { messages.push('Name is required') } if (messages.length > 0) { e.preventDefault() errorElement.innerText = messages.join(', ') } })

 <form id="form"> <div> <label for="firstname">First Name</label> <input id="firstname" name="firstname" type="text" /> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" placeholder="Doe" /> <label for="email">Email</label> <input type="email" name="email" id="email" placeholder="john@doe.com" /> <label for="comment">Comment:</label> <textarea id="comment" name="comment" placeholder="Write something.." style="height:40px; width: 100%"></textarea> <button type="submit">Submit</button> </div> </form> <div id="error"></div>