Execute function on submit if form is validated-CodePudding

Relative beginner at JS, wanting to run a button animation function when the submit button is pressed, but only if the form is validated.

Here's the code:

HTML

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

JS:

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);
}

Have tried various 'if' statements and combinations, but can't quite get there!

Any help very welcome.

CodePudding user response：

You should use the submit event of the form and cancel it. After you're done with validation and animation, you can form.submit() to submit, this time for real.

const contactForm = document.getElementById("contact-form");
const submitBtn = document.getElementById("dont-name-submit");

contactForm.addEventListener("submit", function(ev) {
  ev.preventDefault();

  // do validation
  if (!confirm("everything ok?")) {
    return;
  }
  // do animation
  submitBtn.style.background = "blue";

  // then submit
  contactForm.submit();
})

<form id="contact-form" method="post">
  ...
  <input  type="submit" id="dont-name-submit" value="Send">
</form>

CodePudding user response：

Put required in the inputs you want to be validated. Read more

To change the validation message on an input element, call input.setCustomValidity(message)

const form = 
testForm.addEventListener('submit', (e) => {
  e.preventDefault();
  form.classList.add('expanded')
})

form {
  transition: 600ms ease-out;
}

form.expanded {
  transform: translateX(50px)
}

<form id="testForm">
   <input id="testInput" required type="text"><button>submit</button>
 </form>