title: JavaScript Custom Form Validation
body: <p>I am new to JavaScript and tend to get stuck with some problems. I was trying to create a custom validation for a form, which consists from 4 inputs, but the code doesn't work for me. Does anyone have any ideas how can I fix it? Here is just one of the inputs:</p>
  <pre><code>          &lt;div class=&quot;inputWrapper&quot;&gt;
              &lt;input class=&quot;formInput required type=&quot;text&quot; name=&quot;Email&quot; id=&quot;Email&quot; placeholder=&quot;Email Address&quot;/&gt;
              &lt;img class=&quot;errorImg hidden&quot; src=&quot;/images/icon-error.svg&quot; /&gt;
              &lt;div id=&quot;emailError&quot; class=&quot;errorMessage hidden&quot;&gt;
                &lt;i&gt;Email cannot be empty&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>I also have two divs that should appear, when the input is submitted with error, before that they have a class &quot;hidden&quot; with display none.</p>
  <pre><code>&quot;use strict&quot;;
  
  const formInput = document.querySelector(`.formInput`);
  const errorImg = document.querySelector(`.errorImg`);
  const errorMessage = document.querySelector(`.errorMessage`);
  
  const input = formInput.nodeValue;
  
  const errorOccured = function () {
    errorMessage.classList.remove(`hidden`);
    errorImg.classList.remove(`hidden`);
  };
  
  form.addEventListener(&quot;submit&quot;, function () {
    if (input === ``) {
      errorOccured();
    }
  });
  </code></pre>
  <p>This is how the page looks like itself:
  <a href="https://i.stack.imgur.com/EHZAe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EHZAe.png" alt="" /></a></p>