title: I am not able to show an error message when the input field is empty
body: <p>I am trying to show an error message whenever the form input field <code>name</code> is empty but seems it returns nothing; what's wrong with my code?</p>
  
  <p>I am working on the codepen.io server.<br>
  I have included jquery 3.4.1 instead of jquery 3.3.1 but seems not working as well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var firstName = document.forms["myForm"]["name"];
  
    var mail = document.forms["myForm"]["email"];
    var errorMessage = document.forms["myForm"]["error"];
  
    function check(event) {
      event.preventDefault();
      if (firstName.value == '' || !firstName.value.length) {
        console.log("here");
        errorMessage.innerText = "This is invalid name";
      } else {
        errorMessage.innerText = '';
      }
    }
    firstName.addEventListener('submit', check);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;FCC:Survey Form&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="description" content="survey form helps user fill in  a questionnaire" /&gt;
    &lt;meta name="author" content="lily bani, david jhonson" /&gt;
    &lt;meta name="description" content="survey, form, questionnaire" /&gt;
    &lt;meta http-equiv="refresh" content="30" /&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=en-US" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;!-- add bootstrap to the website --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
    &lt;!-- add fonts to make it stylish --&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Great+Vibes&amp;display=swap" rel="stylesheet"&gt;
    &lt;link type="javascript" src="plain.js" /&gt;
  
  &lt;/head&gt;
  
  &lt;body class="bigBox"&gt;
    &lt;h1 id="title"&gt;Survey Form&lt;/h1&gt;
    &lt;div class="container"&gt;
      &lt;p id="description"&gt;Let us know how to improve FreeCodeCamp&lt;/p&gt;
      &lt;form id="survey-form" action="" method="post" name="myForm"&gt;
        &lt;label for="name" id="name-label"&gt;
  *Name:  &lt;input type="text" name="name" id="name" placeholder="Enter your name"/&gt;
        &lt;span id="error" name="error"&gt; &lt;/span&gt;&lt;br/&gt;
      &lt;/label&gt;
        &lt;label for="email" id="email-label"&gt;
   *Email:  &lt;input type="email" id="email"  name="email" placeholder="Enter your email"/&gt;&lt;span id="error" name="error"&gt; &lt;/span&gt;&lt;br/&gt;
      &lt;/label&gt;
        &lt;label for="age" id="number-label"&gt;
    *Age: &lt;input type="number" name="number" id="number" min="18" max="35" placeholder="Age" /&gt;
      &lt;/label&gt;
        &lt;p id="one"&gt;Which option best describes your current role?&lt;/p&gt;
        &lt;select id="dropdown1"&gt;
          &lt;option value="select an option" disabled&gt;select an option&lt;/option&gt;
          &lt;option value="student"&gt;student&lt;/option&gt;
          &lt;option value="full time job"&gt;full time job&lt;/option&gt;
          &lt;option value="full time learner"&gt;full time learner&lt;/option&gt;
          &lt;option value="prefer not to say"&gt;prefer not to say&lt;/option&gt;
          &lt;option value="others"&gt;others&lt;/option&gt;
        &lt;/select&gt;
        &lt;div class="two"&gt;
          &lt;p&gt;* How likely is that you would recommend freeCodeCamp to a friend?&lt;/p&gt;
          &lt;input type="radio" name="choice" value="Definitely"&gt;Definitely&lt;br&gt;
          &lt;input type="radio" name="choice" value="maybe"&gt;Maybe&lt;br&gt;
          &lt;input type="radio" name="choice" value="notsure"&gt;Not Sure
        &lt;/div&gt;
        &lt;p id="three"&gt;What do you like most in FCC:&lt;/p&gt;
        &lt;select id="dropdown2"&gt;
          &lt;option value="select an option" disabled&gt;select an option&lt;/option&gt;
          &lt;option value="challenegs"&gt;challenges&lt;/option&gt;
          &lt;option value="projects"&gt;projects&lt;/option&gt;
          &lt;option value="community"&gt;community&lt;/option&gt;
          &lt;option value="opensource"&gt;open source&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;p id="four"&gt;Things that should be improved in the future (Check all that apply):&lt;/p&gt;
        &lt;fieldset&gt;
          &lt;div&gt;
            &lt;input type="checkbox" name="sources" value="Front-end Projects"&gt;&lt;label for="go"&gt;Front end Projects&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="Back-end Projects"&gt;&lt;label for="go1"&gt;Back-end Projects&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="Data Visualization"&gt;&lt;label for="go2"&gt;Data Visualization&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="Challenges"&gt;&lt;label for="go3"&gt;Challenges&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="Open Source Community"&gt;&lt;label for="go4"&gt;Open Source Community&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="Gitter help rooms"&gt;&lt;label for="go6"&gt;Gitter help rooms&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="videos"&gt;&lt;label for="go7"&gt;videos&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="city meetups"&gt;&lt;label for="go8"&gt;city meetups&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="wiki"&gt;&lt;label for="go9"&gt;wiki&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="forum"&gt;&lt;label for="go10"&gt;forum&lt;/label&gt;&lt;br&gt;
            &lt;input type="checkbox" name="sources" value="additional courses"&gt;&lt;label for="go11"&gt;additional courses&lt;/label&gt;&lt;br&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
        &lt;p id="text_me"&gt;Any comments or Suggestions:&lt;/p&gt;
        &lt;textarea id="textarea_now" rows="3" cols="25" placeholder="enter your comment here"&gt;
  &lt;/textarea&gt;
  
        &lt;input type="submit" id="button_me" class="btn btn-info" value="Submit"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;!-- optional javascript... using jquery and popper.js for interactive mode --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;link type="text/css" src="plain.css" /&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It should return the error <code>"This is invalid name"</code> but it's returning nothing.</p>