eventListener works on click 1. But fails on click 2

Question

So i am making a signup form with action="signup.inc.php" But im handling the validation in javascript. If the fields are empty or the password don't match the input gets a red border and the placeholder is replaced. This works perfectly on the first click. But as soon as i click again he just shoots to signup.inc.php.

I need those validations to be done before we go to the signup.inc.php file.

let signupForm = document.getElementById('signupForm');
let firstname = document.getElementById('firstname');
let lastname = document.getElementById('lastname');
let email = document.getElementById('email');
let username = document.getElementById('username');
let password = document.getElementById('password');
let passwordRepeat = document.getElementById('passwordRepeat');
let result = false;

function showError(input, message) {
    let formControl = input.parentElement;
    formControl.className = 'formControl error';
    let error = input;
    error.placeholder = message;
}
function showSucces(input) {
    let formControl = input.parentElement;
    formControl.className = 'formControl succes';
}
function requiredFields(inputArr) {
    inputArr.forEach(function (input){
        if (input.value.trim() === ''){
            showError(input, 'this field is required');
        } else {
            showSucces(input);
            result = true;
        }
    });
}
function matchPasswords(input1, input2) {
    if (input1.value !== input2.value) {
        showError(input2, "These passwords don't match");
    } else {
        result = true;
    }
}
/* Eventlistener */
signupForm.addEventListener('submit', function(e){
    if (result !== true) {
        requiredFields ([firstname, lastname, email, username, password, passwordRepeat]);
        matchPasswords (password, passwordRepeat);
        e.preventDefault();
    } else {
        result = true;
    }
});

.signupFormWrap {
  margin-bottom: 15px;
}

.signupFormWrap,
.formControl {
  width: 400px;
  display: flex;
  flex-direction: column;
}

.formControl label {
  font-size: 1.2rem;
}

.formControl>input[type=text],
input[type=email],
input[type=password] {
  padding-left: 10px;
  font-size: 1rem;
  line-height: 1.8;
}

.button {
  margin-top: 15px;
  margin-bottom: 15px;
}

.formControl.error>input {
  border: 1px solid red;
}

.formControl.succes>input {
  border: 1px solid green;
}

<form name="signupForm" id="signupForm" action="assets/php/signup.inc.php" method="POST">
  <div class="signupFormWrap">

    <div class="formControl">
      <label for="firstname">Firstname</label>
      <input type="text" name="firstname" id="firstname" placeholder="Fill in your firstname here..">
    </div>

    <div class="formControl">
      <label for="lastname">lastname</label>
      <input type="text" name="lastname" id="lastname" placeholder="Fill in your lastname here..">
    </div>

    <div class="formControl">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" placeholder="Fill in your email here..">
    </div>

    <div class="formControl">
      <label for="username">Username</label>
      <input type="text" name="username" id="username" placeholder="Fill in your username here..">
    </div>

    <div class="formControl">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" placeholder="fill in your password here..">
    </div>

    <div class="formControl">
      <label for="passwordRepeat">Verify your password</label>
      <input type="password" name="passwordRepeat" id="passwordRepeat" placeholder="Verify your password">
    </div>
    <button type="submit" name="submit" class="button">Sign up</button>
  </div>
</form>

Answer 1

Your problem is that if any of the inputs are valid, result is set to true and so on the next submit the inputs are not checked and the form submits. You can work around that by always testing all the inputs, returning the error status from each input checking function and checking that they all return true:

let signupForm = document.getElementById('signupForm');
let firstname = document.getElementById('firstname');
let lastname = document.getElementById('lastname');
let email = document.getElementById('email');
let username = document.getElementById('username');
let password = document.getElementById('password');
let passwordRepeat = document.getElementById('passwordRepeat');

function showError(input, message) {
  let formControl = input.parentElement;
  formControl.className = 'formControl error';
  let error = input;
  error.placeholder = message;
}

function showSucces(input) {
  let formControl = input.parentElement;
  formControl.className = 'formControl succes';
}

function requiredFields(inputArr) {
  result = true;
  inputArr.forEach(function(input) {
    if (input.value.trim() === '') {
      showError(input, 'this field is required');
      result = false;
    } else {
      showSucces(input);
    }
  });
  return result;
}

function matchPasswords(input1, input2) {
  result = true;
  if (input1.value !== input2.value) {
    showError(input2, "These passwords don't match");
    result = false;
  }
  return result;
}
/* Eventlistener */
signupForm.addEventListener('submit', function(e) {
  let result = true;
  result = result && requiredFields([firstname, lastname, email, username, password, passwordRepeat]);
  result = result && matchPasswords(password, passwordRepeat);
  if (!result) {
    e.preventDefault();
  }
});

.signupFormWrap {
  margin-bottom: 15px;
}

.signupFormWrap,
.formControl {
  width: 400px;
  display: flex;
  flex-direction: column;
}

.formControl label {
  font-size: 1.2rem;
}

.formControl>input[type=text],
input[type=email],
input[type=password] {
  padding-left: 10px;
  font-size: 1rem;
  line-height: 1.8;
}

.button {
  margin-top: 15px;
  margin-bottom: 15px;
}

.formControl.error>input {
  border: 1px solid red;
}

.formControl.succes>input {
  border: 1px solid green;
}

<form name="signupForm" id="signupForm" action="assets/php/signup.inc.php" method="POST">
  <div class="signupFormWrap">

    <div class="formControl">
      <label for="firstname">Firstname</label>
      <input type="text" name="firstname" id="firstname" placeholder="Fill in your firstname here..">
    </div>

    <div class="formControl">
      <label for="lastname">lastname</label>
      <input type="text" name="lastname" id="lastname" placeholder="Fill in your lastname here..">
    </div>

    <div class="formControl">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" placeholder="Fill in your email here..">
    </div>

    <div class="formControl">
      <label for="username">Username</label>
      <input type="text" name="username" id="username" placeholder="Fill in your username here..">
    </div>

    <div class="formControl">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" placeholder="fill in your password here..">
    </div>

    <div class="formControl">
      <label for="passwordRepeat">Verify your password</label>
      <input type="password" name="passwordRepeat" id="passwordRepeat" placeholder="Verify your password">
    </div>
    <button type="submit" name="submit" class="button">Sign up</button>
  </div>
</form>

Answer 2

change all validation functions like

function matchPasswords(input1, input2) {
    if (input1.value !== input2.value) {
        showError(input2, "These passwords don't match");
        return false;
    } 
    return true;
}

signupForm.addEventListener('submit', function(e){
   
    if(!requiredFields ([firstname, lastname, email, username, password, passwordRepeat]) &&
        !matchPasswords (password, passwordRepeat)){
        e.preventDefault();
    } 
});