Does anyone know why this code is allowing passwords to go through that it shouldn't?

I have this snippet of Javascript code that is meant to ensure that two passwords are the same before the user submits, as well as ensure that the password strength is up to a certain standard. It correctly blocks passwords that are not the same, but it does not block passwords that are too short or do not fulfill the regex requirements.

Here is my code:

const firstPass = document.querySelector("#firstPass");
const secondPass = document.querySelector("#secondPass");
const errorText = document.querySelector("#error-text");
const myButton = document.querySelector("#button");
let passwordStrength = false;

/** 
Regex expression makes sure it has at least 6 characters of which at least one is an uppercase letter, 
one is a lowercase letter, and one is a special character.
*/
let regex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>])(?=.*[0-9]).{6,}$');

// Checks to make sure password follows requirements
if (regex.test(firstPass.value)) {
  passwordStrength = true;
}

// When the button to submit the form is submitted it calls this function.
// If the passwords do not match, it throws up an error message and doesn't allow the submission to go through.
// Otherwise it briefly describes a success message and allows the submission to continue.
myButton.onclick = function() {
  if (firstPass.value != secondPass.value) {
    errorText.style.display = "block";
    errorText.classList.remove("matched");
    errorText.textContent = "Error! The passwords do not match!";
    return false;
  } else if (passwordStrength === false) {
    errorText.style.display = "block";
    errorText.classList.remove("matched");
    errorText.textContent = "The password must be at least 6 characters long, have a special character, as well as have a lower and uppercase letter.";
    return false;
  } else {
    errorText.style.display = "block";
    errorText.classList.add("matched");
    errorText.classList.remove("text-danger");
    errorText.textContent = "Passwords match.";
    return true;
  }
};

<form action="protected/register.inc.php" method="post" autocomplete="off">

  <p class="text-center">New Profile:</p>

  <!-- Name input -->
  <div class="form-outline mb-4">
    <input type="text" id="registerName" class="form-control" name="registerName" />
    <label class="form-label" for="registerName">First Name</label>
  </div>

  <!-- Username input -->
  <div class="form-outline mb-4">
    <input type="text" id="registerLastName" class="form-control" name="registerLastName" />
    <label class="form-label" for="registerLastName">Last Name</label>
  </div>

  <!-- Email input -->
  <div class="form-outline mb-4">
    <input type="email" id="registerEmail" class="form-control" name="registerEmail" />
    <label class="form-label" for="registerEmail">Email</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4">
    <input type="password" id="firstPass" class="form-control" name="firstPass" />
    <label class="form-label" for="firstPass">New Password</label>
  </div>

  <div id="error-text" class="text-danger"></div>
  <!-- Confirm password input -->
  <div class="form-outline mb-4">
    <input type="password" id="secondPass" class="form-control" name="secondPass" />
    <label class="form-label" for="secondPass">Repeat Password</label>
  </div>

  <!-- Submit button -->
  <button id="button" type="submit" class="btn btn-primary btn-block mb-3">Register</button>
</form>

Solution

I'm not sure if this is part of the issue, since it seems like it might cause the opposite problem, but you are only checking the regex on page load and not on button click. Wouldn't you need to check the regex and update passwordStrength each time the submit button is clicked?

Your example is working for me if I put the regex test inside the myButton.onclick function.