Why does my submit button refuse to submit?

Question

So I made a code that reads the name and password form in html. In java script I made code to ensure that the name and password fields are filled in. It also records that if the password value is less than or equal to 6 a message would display "Password must be longer than 6 characters" and if the password value is greater than or equal to 15 a message would display "Password must be shorter than 15 characters" (extra: for whatever reason when I put a 6 character password it would display that message despite the operator I included same goes for the latter).

Here's the HTML Code Followed by the javascript:

<!--Error container-->
<div id="error"></div>
    
<!--Form-->
    
<form id="form" action="/" method="GET">
  <fieldset>
    <!--Legend-->
    <legend>Form: </legend>             
    <!--Name-->
    <label for="name">Name:</label>
    <input type="text" name="Name" id="name">
    <br><br>
                        
    <!--Password-->
    <label>Password: </label>
    <input type="password" name="password" id="password">
    <br><br>
    
    <!--Submit and Reset Button-->
    <input type="submit" Value="Submit">
    <input type="reset" Value="Reset">  
  </fieldset>
</form> 
<!--form-->

[Filler text: I thought I made the question as simplistic and easy to follow as it needs to be] Here's the javascript portion. The first four lines gets the id from the html code dropped from above and then the magic happens from there.

const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
    
form.addEventListener('submit', (e) =>{
  let messages = []
  if(name.value === '' || name.value == null){
    messages.push("Name is required")
  }
        
  if(password.value.length <= 6){
    messages.push("Password must be longer than 6 characters")
  }
        
  if(password.value.length >= 15){
    messages.push("Password must be shorter than 15 characters")
  }
        
  if(messages.length > 0){
    e.preventDefault()
    errorElement.innerText = messages.join(', ')
  }     
  e.preventDefault()
})

Please stick to Javascript and html And thank you for using your time to read and lend a hand.

Answer 1

Your form won't submit because you're actively preventing it from doing so using e.preventDefault()

I would either just remove that or trigger a submit action via JavaScript if no errors occur:

if (!messages)  //the variable messages is empty, so there are no errors
    form.submit() //submit the form

This might also help you: How can I submit a form using JavaScript?

Answer 2

Just a few minor things:

• <= 6 is what's causing it to still show the error message when it's exactly 6 characters. Updating it to < 6 will only show the message when the password is less than 6 characters (as opposed to less than or equal to)
• The e.preventDefault() is still being called, even outside of the error check
• The messages array is never reset, so even once the user has fixed all errors, the form is still being prevented from submitting

Here's an updated version:

const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')

form.addEventListener('submit', (e) =>{
  let isValid = true;
  let messages = []
  if(name.value === '' || name.value == null){
    messages.push("Name is required");
    isValid = false;
  } else if(password.value.length < 6){
    messages.push("Password must be longer than 6 characters");
    isValid = false;
  } else if (password.value.length >= 15){
    messages.push("Password must be shorter than 15 characters");
    isValid = false;
  }
  if(!isValid){
    e.preventDefault()
    errorElement.innerText = messages.join(', ')
  }     
})

<!--Error container-->
<div id="error"></div>
    
<!--Form-->
    
<form id="form" action="/" method="GET">
  <fieldset>
    <!--Legend-->
    <legend>Form: </legend>             
    <!--Name-->
    <label for="name">Name:</label>
    <input type="text" name="Name" id="name">
    <br><br>
                        
    <!--Password-->
    <label>Password: </label>
    <input type="password" name="password" id="password">
    <br><br>
    
    <!--Submit and Reset Button-->
    <input type="submit" Value="Submit">
    <input type="reset" Value="Reset">  
  </fieldset>
</form> 
<!--form-->

Side note: In real life, you never want to restrict the length of the users password. Let them make it as strong as they like. You're going to hash it anyway, so length and special characters won't be an issue for storage.