Why isn't my javascript form validation working?

Question

My JS form validation doesn't print out the error message, it seems as though it ignores the prevent default.

I've looked over the code multiple times and can't seem to find the error.

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(', ')
  }
})

No error messages but I am expecting it to display the js error message I set above the form.

Answer 1

It's a typo error. Set e.preventDefault() instead of e.preventDef**ual**t() . Also you missed the error div to display errors.

 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>