title: How can I make my input border colors red when they fail validation? (Vanilla JavaScript only)
body: <p>So I have a few text inputs on a form, and I'd like to make the borders glow red when the user tries to submit the form and the inputs do not meet a specific criteria. The criteria is that the fields cannot be empty, and if they are, the form will take the users back to the field and show a red border.</p>
  <p>Below is what I've got so far, but not only do the styles not show up, but the fields disappear.</p>
  <p>What do I need to change?</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>const submitButton = document.getElementById('submitButton');
  const name = document.getElementById('name');
  const email = document.getElementById('email');
  
  function nameValidation() {
      if (name.value == 0) {
          name.style.borderColor = "red solid 5px";
      }
  }
  
  function emailValidation() {
      if (email.value == 0) {
          email.style.borderColor = "red solid 5px";
      }
  }
  
  submitButton.addEventListener('click', () =&gt; {
      nameValidation();
      emailValidation();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="index.html" novalidate&gt;
        &lt;fieldset&gt;
        
          &lt;label for="name"&gt;Name:&lt;/label&gt;
            &lt;input type="text" id="name"&gt;
  
          &lt;label for="mail"&gt;Email:&lt;/label&gt;
            &lt;input type="email" id="email"&gt;
            
        &lt;/fieldset&gt;
        
        &lt;button id="submitButton"&gt;Register&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>