Form validation using vanilla js

Question

I am building my first contact form using HTML, Bootstrap and JavaScript:

I am currently trying to validate my form for inputs.
I have been successful to stop the form submission if any input is missing but I am unable to submit the form once all the inputs are entered.
Please provide me solutions for this in vanilla js.

document.getElementById("myForm").addEventListener("submit", function(evt) {
  evt.preventDefault();
  var error = "";
  if (document.getElementById("email").value == "") {
    error += "The email field is required.<br>";
  }

  if (document.getElementById("subject").value == "") {
    error += "The subject field is required.<br>";
  }

  if (document.getElementById("content").value == "") {
    error += "The content field is required.<br>";
  }

  if (error != "") {
    document.getElementById("error").innerHTML = '<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>';
    return false;
  } else {
    document.getElementById("myForm").removeEventListener("submit", function() {
      return true;
    });
  }
});

<div class="container">
  <p class="display-6">Get in Touch!</p>
  <div id="error"></div>
  <form id="myForm" method="post">
    <div class="mb-3">
      <label class="form-label">Email address</label>
      <input id="email" type="email" name="email" class="form-control" placeholder="Enter Email">
      <p class="form-text">We'll never share your email with anyone else</p>
    </div>
    <div class="mb-3">
      <label class="form-label">Subject</label>
      <input id="subject" type="text" name="subject" class="form-control">
    </div>
    <div class="mb-3">
      <label class="form-label">What would you like to ask us?</label>
      <textarea id="content" type="text" name="body" class="form-control"></textarea>
    </div>
    <input id="submit" name="submit" type="submit" class="btn btn-primary">
  </form>
</div>

Does this answer your question? [How can I submit a form using JavaScript?](https://stackoverflow.com/questions/9855656/how-can-i-submit-a-form-using-javascript) — B001ᛦ, Apr 24 '21 at 18:58
I made a snippet and removed the trailing comma in the script. — mplungjan, Apr 24 '21 at 18:59
What have you tried to resolve the problem? Why not set the `required` attribute on fields that should not be empty? — Nico Haase, Apr 27 '21 at 19:13

mplungjan · Answer 1 · 2021-04-24T19:06:40.650

NEVER call anything name="submit" or id="submit" if you ever want to submit a form using script
ONLY use preventDefault to stop submission
I suggest you use an array and a hide class

document.getElementById("myForm").addEventListener("submit", function(evt) {
  let error = [];
  if (document.getElementById("email").value == "") {
    error.push("The email field is required.");
  }
  if (document.getElementById("subject").value == "") {
    error.push("The subject field is required.");
  }
  if (document.getElementById("content").value == "") {
    error.push("The content field is required.");
  }

  document.getElementById("error").classList.toggle("hide",error.length===0)
  if (error.length>0) {
    document.getElementById("msg").innerHTML = error.join("<br/>")
    evt.preventDefault();
  }
});

.hide { display:none;}

<div class="container">
  <p class="display-6">Get in Touch!</p>
  <div id="error" class="hide">
    <div class="alert alert-danger" role="alert">
      <p><strong>There were error(s) in your form:</strong></p>
      <p id="msg"></p>
    </div>
  </div>
  <form id="myForm" method="post">
    <div class="mb-3">
      <label class="form-label">Email address</label>
      <input id="email" type="email" name="email" class="form-control" placeholder="Enter Email">
      <p class="form-text">We'll never share your email with anyone else</p>
    </div>
    <div class="mb-3">
      <label class="form-label">Subject</label>
      <input id="subject" type="text" name="subject" class="form-control">
    </div>
    <div class="mb-3">
      <label class="form-label">What would you like to ask us?</label>
      <textarea id="content" type="text" name="body" class="form-control"></textarea>
    </div>
    <input name="subbutton" type="submit" class="btn btn-primary">
  </form>
</div>

Alternatively just add required to the fields

<div class="container">
  <p class="display-6">Get in Touch!</p>
  <form id="myForm" method="post">
    <div class="mb-3">
      <label class="form-label">Email address</label>
      <input id="email" type="email" name="email" class="form-control" placeholder="Enter Email" required>
      <p class="form-text">We'll never share your email with anyone else</p>
    </div>
    <div class="mb-3">
      <label class="form-label">Subject</label>
      <input id="subject" type="text" name="subject" class="form-control" required>
    </div>
    <div class="mb-3">
      <label class="form-label">What would you like to ask us?</label>
      <textarea id="content" type="text" name="body" class="form-control" required></textarea>
    </div>
    <input name="subbutton" type="submit" class="btn btn-primary">
  </form>
</div>

Thank you for the help. Using array in place of simple string helped. — Nikita Pandey, Apr 25 '21 at 07:57

Form validation using vanilla js

1 Answers1