Prevent form redirection if validation fails

Question

I am making a function in JS that prevents you from submitting if there is something wrong.

When I click the submit button it does not check if the code is valid, which really bugs me. My expected outcome is to redirect to another page if it is valid, which doesn't happen! Please help!

const formm = document.querySelector('#CreateAccount')
const school = document.querySelector('#skool');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const pwd = document.querySelector('#password');
const conf = document.querySelector('#confpassword');

formm.addEventListener("submit", (event) => {
  if (isFormValid() == true) {
    window.location.assign("start.html");
    console.log(2);
  } else {
    event.preventDefault();
    console.log(30);
  }
  validateForm();
  console.log(30);
});


function isFormValid() {
  const inputscontainers = document.querySelectorAll('.inputs')
  let result = true;
  inputscontainers.forEach((container) => {
    if (container.classList.contains("error")) {
      return false;
    }
  })
}

function validateForm() {
  if (username.value.trim() == '') {
    setError(username, 'Name cannot be empty');
  } else if (username.value.trim() < 5) {
    setError(username, 'Idrc');
    console.log(3);
  } else {
    setSuccess(username);
  }
  if (email.value.trim() == '') {
    setError(email, 'You forgot to fill in your email.');
  } else if (isEmailValid(email.value)) {
    setSuccess(email);
  } else {
    setError(email, "Provide a valid email");
  }
  if (pwd.value.trim() == '') {
    setError(pwd, "Password can't be empty");
  } else if (pwd.value.trim().length < 6 || pwd.value.trim().length > 20) {
    setError(pwd, 'Length must be minimum 6 characters and max 20.');
  } else {
    setSuccess(pwd);
  }
  if (conf.value.trim() == '') {
    setError(conf, 'This is an empty password');
  } else if (conf.value !== pwd.value) {
    setError(conf, 'Passwords dont match');
  } else {
    setSuccess(conf);
  }



}

function setError(elementr, errorMessage) {
  const parents = elementr.parentElement;
  parents.classList.add("error");
  parents.classList.remove("success");
  const paragraph = parents.querySelector('p').textContent = errorMessage;
}

function setSuccess(elementr) {
  const parents = elementr.parentElement;
  parents.classList.add("success");
  parents.classList.remove("error");
}

function isEmailValid(email) {
  const reg = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
  return reg.test(email);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="CreateAccount" action="start.html" method="GET">
  <div class="main">
    <div class="Title">
      <h1>Enter your details.</h1>
    </div>
    <div class="inputs">
      <label for="skool">SchoolName:</label>
      <input type="text" id="skool" placeholder="Put the school name" name="skool"></input>
      <i class="fa-solid fa-circle-xmark"></i>
      <i class="fa-solid fa-circle-check"></i>
      <p>Error Message</p>
    </div>
    <div class="inputs">
      <label for="username">Username:</label>
      <input type="text" id="username" placeholder="Username" name="username">
      <i class="fa-solid fa-circle-xmark"></i>
      <i class="fa-solid fa-circle-check"></i>
      <p id="p">Error Message</p>
    </div>
    <div class="inputs">
      <label for="password">Password</label>
      <input type="password" id="password" placeholder="    Password" name="password"></input>
      <i class="fa-solid fa-circle-xmark"></i>
      <i class="fa-solid fa-circle-check"></i>
      <p id="p">Error Message</p>
    </div>
    <div class="inputs">
      <label for="confpassword">Confirm Password</label>
      <input type="password" id="confpassword" placeholder="    Confirm Password" name="confpassword"></input>
      <i class="fa-solid fa-circle-xmark"></i>
      <i class="fa-solid fa-circle-check"></i>
      <p>Error Message</p>
    </div>
    <div class="inputs">
      <label for="email">Email:</label>
      <input type="email" id="email" placeholder="Email" name="email"></input>
      <i class="fa-solid fa-circle-xmark"></i>
      <i class="fa-solid fa-circle-check"></i>
      <p>Error Message</p>
    </div>
    <button class="submitbtn" type="submit">Submit</button>
  </div>
  </div>

Answer 1

Other than the inversion on validation / isValidForm, your isValidForm function doesn't return a result, so it can't be compared on a if statement Here's how to fix it

    formm.addEventListener("submit", (event) => {
        validateForm();
        if (isFormValid() == true) {
            window.location.assign("start.html");
        } else {
            event.preventDefault();
        }
    });


    function isFormValid() {
        const inputscontainers = document.querySelectorAll('.inputs')
        let result = true;
        inputscontainers.forEach((container) => {
            if (container.classList.contains("error")) {
                return false;
            }
        })
        return result;
    }