在函数

Question

对你来说可能是一个非常简单的修复JS大师，目前我有一个带有一些基本验证的表单。如果我在提交功能之外调用它可以正常工作，但是一旦检查验证我需要提交表单，任何人都可以帮忙吗？通过在函数底部返回true来调用它也是正确的方法吗？

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>

Answer 1

仅在验证未通过时使用preventDefault（）。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;