title: querySelectorAll('input:not([type="hidden"]):not([value=""])') keeps returning elements although the inputs are empty
body: <p>I'm trying to fetch all empty inputs (<code>value=""</code>) from my form. </p>
  
  <pre><code>var inputsEmpty = loginForm.querySelectorAll('input:not([type="hidden"]):not([value=""])');
  </code></pre>
  
  <p>Keeps returning elements</p>
  
  <blockquote>
    <p>0: input#companyName.form-control</p>
    
    <p>1: input#userName.form-control</p>
    
    <p>2: input#password.form-control</p>
  </blockquote>
  
  <p>although they are not empty (clicking on them in the console shows <code>value:''</code>. </p>
  
  <p>I tried using jQuery thinking it might be something with the queryselector </p>
  
  <pre><code>var inputsEmpty = $('input:not([type="hidden"]):not([value=""]):not([id="email"])');
  </code></pre>
  
  <p>I get the same result. </p>
  
  <pre><code> &lt;form class="form-horizontal form-material" id="loginform" action="/login/user_login" method="POST" novalidate&gt;
  
      &lt;h3 class="text-center m-b-20"&gt;Sign In&lt;/h3&gt;
  
      &lt;div class="form-group "&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;input class="form-control" type="text" name='company_name' id="companyName"  placeholder="Company Name" required="1" minlength="6" maxlength="30"/&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group "&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;input class="form-control" type="text" name="user_name" id="userName" autocomplete="off" placeholder="User Name" placeholder="Username" required="1" minlength="6" maxlength="30"&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;input class="form-control" type="password" name='password' id="password" placeholder="Password" required="1" minlength="6" maxlength="30"&gt; 
          &lt;/div&gt;
      &lt;/div&gt; .......
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>const loginForm = document.querySelector('#loginform');
  const submit    = loginForm.querySelector('#submitBtn');
  // const $loginForm = $('#loginform');
  
  bootstrapValidate(
      '#companyName',
      'min:6:Invalid company name|max:30:Invalid company name|required:This field is required'
  );
  
  bootstrapValidate(
      '#userName',
      'min:3:Invalid company name|max:30:Invalid company name|required:This field is required'
  );
  
  bootstrapValidate(
      '#password',
      'min:6:Password too short (6 min)|max:30:Password too long (30 max)|required:This field is required'
  );
  
  function toSubmit() {
  
      var notValid    = loginForm.querySelector('.is-invalid');
      // var inputsEmpty = loginForm.querySelector('input:not([value=""])');
      // var inputsEmpty = loginForm.querySelector('input:not([value]):not([value=""])');
      var inputsEmpty = loginForm.querySelectorAll('input:not([type="hidden"]):not([value=""])');
      // var inputsEmpty = loginForm.querySelector('input[value=""]:not([type="hidden"])');
      // var inputsEmpty = $('input:not([type="hidden"]):not([value=""]):not([id="email"])');
  
      console.log(notValid);
      console.log(inputsEmpty);
  
      if (notValid || inputsEmpty)
          return false;
      else 
          loginForm.submit();
  }
  
  submit.onclick = toSubmit;
  </code></pre>
  
  <p>How do I list only empty inputs </p>