title: JavaScript form validation working unexpectedly and printing undefined
body: <p>I was trying to write a simple Vanilla JS function which would check if user has left any form fields empty and if that's the case, then alert the user. Unfortunately, it doesn't quite work and I don't know why.</p>
  <p><a href="https://i.stack.imgur.com/PP3VU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PP3VU.png" alt="Picture of form" /></a></p>
  <p>As, you can see it says &quot;undefined can't be left empty&quot;.</p>
  <p>Here's the JS Code:</p>
  <pre><code>var username= document.getElementById(&quot;UsernameInput&quot;);
  var email= document.getElementById(&quot;EmailInput&quot;);
  var pass= document.getElementById(&quot;PasswordInput&quot;);
  var confirmPass= document.getElementById(&quot;ConfirmPasswordInput&quot;);
  var form= document.querySelector(&quot;.registration-form&quot;);
  
  // Function for checking empty input 
  function checkEmpty(inputArr){
    for(i=0;i&lt;inputArr.length;i++){
      if(inputArr[i].value.trim()==='')
        var stringified= JSON.stringify(inputArr[i]);
        alert(`${stringified} can't be left empty`);
        console.log(inputArr[i]);
        break;
    }
  }
  
  form.addEventListener(&quot;submit&quot;, function(e){
    
    if(checkEmpty([username,email,pass,confirmPass]));
      e.preventDefault();
   
   
  })
  </code></pre>
  <p>So, why is the &quot;stringified&quot; variable undefined? (I'm using JSON.stringify because when I was not doing that it was returning [object object]).</p>
  <p>Here's the HTML for the form:</p>
  <pre><code>&lt;form action=&quot;#&quot; class=&quot;registration-form &quot;&gt;
        &lt;div class=&quot;row &quot;&gt;
          &lt;div class=&quot;six columns  &quot;&gt;
            &lt;label for=&quot;username&quot;&gt;Your username (has to be unique)&lt;/label&gt;
            &lt;input class=&quot;u-full-width&quot; type=&quot;text&quot; placeholder=&quot;redditStar&quot; id=&quot;UsernameInput&quot; name=&quot;username&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
     
     &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;six columns&quot;&gt;
        &lt;label for=&quot;email&quot;&gt;Your email&lt;/label&gt;
        &lt;input class=&quot;u-full-width&quot; type=&quot;email&quot; placeholder=&quot;test@emailcom&quot; id=&quot;EmailInput&quot; name=&quot;email&quot;&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;six columns&quot;&gt;
        &lt;label for=&quot;password&quot;&gt;Your password&lt;/label&gt;
        &lt;input class=&quot;u-full-width&quot; type=&quot;password&quot; placeholder=&quot;Enter a strong password&quot; id=&quot;PasswordInput&quot; name=&quot;password&quot;&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;six columns&quot;&gt;
        &lt;label for=&quot;confirm-password&quot;&gt;Confirm your Password&lt;/label&gt;
        &lt;input class=&quot;u-full-width&quot; type=&quot;password&quot; placeholder=&quot;Confirm password..&quot; id=&quot;ConfirmPasswordInput&quot; name=&quot;passwordConfirm&quot;&gt;
      &lt;/div&gt;
     &lt;/div&gt;
      
    &lt;input class=&quot;button-primary submitRegister&quot; type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  &lt;/form&gt;
  </code></pre>