JS新手求助：表单验证通过后触发提交按钮动画实现方案

我是JavaScript入门开发者，希望点击提交按钮时，仅当表单验证通过的情况下运行按钮动画函数。以下是我的代码：

HTML代码 #

<form id="contact-form" method="post">
...
<button class="btn" type="submit" id="submit" name="submit">Send</button>
</form>

JavaScript代码 #

const name = document.getElementById("name");
const email = document.getElementById("email");
const message = document.getElementById("message");
const contactForm = document.getElementById("contact-form");
const errorElement = document.getElementById("error");
const successMsg = document.getElementById("success-msg");
const submitBtn = document.getElementById("submit");

const validate = (e) => {
  e.preventDefault();

  if (name.value.length < 3) {
    errorElement.innerHTML =
      "Your name should be at least three characters long.";
    return false;
  }

  ... /*various other rules for form fields */

  if (message.value.length < 15) {
    errorElement.innerHTML = "Please write a longer message.";
    return false;
  }

  errorElement.innerHTML = "";
  successMsg.innerHTML =
    "Thank you! I will get back to you as soon as possible.";

  e.preventDefault();
  setTimeout(function () {
    successMsg.innerHTML = "";
    document.getElementById("contact-form").reset();
  }, 6000);

  return true;
};

const emailIsValid = (email) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

submitBtn.addEventListener("click", validate);

// Event listeners

/* $('.btn').on('click', toggleBtn); */

/* THE ANIMATION TRIGGERED BY CLASS CHANGE */
function toggleBtn() {
  alert("working");
  btn = this;
  btn.classList.add("is-active");
  setTimeout(function () {
    btn.classList.remove("is-active");
  }, 2500);
}

我尝试过多种if语句组合，但始终无法实现需求，恳请各位提供帮助！

内容的提问来源于stack exchange，提问作者Matt Rudd