title: Field validation for not null or empty is not triggering
body: <p>I'm trying to send messaging to the user that a field is required if they fail to input a value.  I want the error to be displayed on the field itself, rather than a global error message at the top of the page.</p>
  
  <p>If I do not enter any data into the form, it still allows submission.  However, if I do not enter a username but I do enter mismatched passwords, the username field receives the validation message "Passwords do not match".</p>
  
  <p>So, it appears to me, that for some reason my code to check if the input is null is not passing as True and so the function continues to my next condition.</p>
  
  <p>Why isn't this function catching nulls?</p>
  
  <pre><code>&lt;form action="/register" method="post"&gt;
      &lt;div class="form-group"&gt;
          &lt;input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text"
                 oninput="checkNull(this)" id="username"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" name="password" placeholder="Password" type="password" oninput="checkNull(this)"
                 id="password"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" name="confirmPassword" placeholder="Confirm Password" type="password"
                 oninput="check(this)" id="confirmPassword"&gt;
      &lt;/div&gt;
      &lt;script language='javascript' type='text/javascript'&gt;
          function check(input) {
              if (input.value != document.getElementById('password').value) {
                  input.setCustomValidity('Passwords do not match');
              } else {
                  input.setCustomValidity('');
              }
          }
          if (input.value == "" || input.value == null) {
                  input.setCustomValidity('This field is required');
              } 
              else {
                  input.setCustomValidity('');
              }
      &lt;/script&gt;
      &lt;button class="btn btn-primary" type="submit"&gt;Register&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've tried some additional troubleshooting.  I split my functions out, one to check for matching passwords, one to check for no input.  I realized that by calling them in the same function I was comparing each to the password which is a problem.</p>
  
  <p>As a sanity check, I then set to check for a specific string "foo".  When passing in "foo", the error displays as expected, so I know at least the function is getting called.</p>
  
  <p>I then tried to use "===" to compare the value rather than "==", but that didn't work either.</p>
  
  <p>Code updated to reflect most recent changes.</p>