Submitting form within a function

Question

Probably a very easy fix for you JS gurus out there, currently I have a form with some basic validation. If i call it outside of a submit function it works fine, however i need the form to submit once it checks the validation, can anyone help? Also is the correct way to call it by returning true at the bottom of the function?

function submitForm() {
  //Form validation, post.
  submitBtn.addEventListener("click", function(event) {
    event.preventDefault();

    //Form fields
    const contactName = document.getElementById("form__contact-name").value;
    const contactEmail = document.getElementById("form__contact-email").value;
    const contactPhone = document.getElementById("form__contact-phone").value;
    const contactMessage = document.getElementById("form__contact-message").value;

    //Check if values aren't empty, if they're not post form. Else alert the user to complete.
    contactName !== '' && contactEmail !== '' && contactPhone !== '' && contactMessage !== '' ?
      true :
      alert("Please complete form");
  })
}

<form action="#" method="post">

  <div class="form__contact-wrapper">
    <label for="Your name">Your Name</label>
    <input id="form__contact-name" type="text" name="contact-name" />
  </div>

  <div class="form__contact-wrapper">
    <label for="Your email">Your email address</label>
    <input id="form__contact-email" type="text" />
  </div>

  <div class="form__contact-wrapper">
    <label for="Your phone number">Your phone number</label>
    <input id="form__contact-phone" type="number" />
  </div>

  <div class="form__contact-wrapper">
    <label for="Your message">Your message</label>
    <textarea id="form__contact-message" rows="5"></textarea>
  </div>

  <div class="form__contact-wrapper">
    <input id="submitbtn" type="submit" value="send my message" onsubmit="submitForm()" />
  </div>
</form>

Amthieu · Accepted Answer · 2018-04-22 18:45:08Z

1

Use preventDefault() only if the validation doesn't pass.

document.getElementById('contact-form').addEventListener('submit', function(e) {

  const contactName = document.getElementById("form__contact-name").value;
  const contactEmail = document.getElementById("form__contact-email").value;
  const contactPhone = document.getElementById("form__contact-phone").value;
  const contactMessage = document.getElementById("form__contact-message").value;

  if (contactName === '' || contactEmail === '' || contactPhone === '' || contactMessage === '') {
    e.preventDefault();
    alert("Please complete form");
  }
});

<form action="#" method="post" id="contact-form">

  <div class="form__contact-wrapper">
    <label for="Your name">Your Name</label>
    <input id="form__contact-name" type="text" name="contact-name" />
  </div>

  <div class="form__contact-wrapper">
    <label for="Your email">Your email address</label>
    <input id="form__contact-email" type="text" />
  </div>

  <div class="form__contact-wrapper">
    <label for="Your phone number">Your phone number</label>
    <input id="form__contact-phone" type="number" />
  </div>

  <div class="form__contact-wrapper">
    <label for="Your message">Your message</label>
    <textarea id="form__contact-message" rows="5"></textarea>
  </div>

  <div class="form__contact-wrapper">
    <input type="submit" value="send my message" />
  </div>
</form>

answered Apr 22, 2018 at 18:45

Amthieu

1541 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Over a year ago

Thank you for the reply! My validation still doesn't fire?

Amthieu Over a year ago

If you run the above code snippet, leave a field empty and submit the form, validation will prevent the post request.

Mark Over a year ago

Hmmm, when i copy and paste it in my code it doesn't work :( But it does on the example you have just wrote! :o

Amthieu Over a year ago

Make sure you also add the id on the form element and remove the onclick attribute from the input.

Collectives™ on Stack Overflow

Submitting form within a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related