JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginForm">
  <form id="loginSubmit" action="?mode=validate">

    <h2>LOGIN</h2>

    <h2>Username</h2>

    <div class="loginButton">
      <input type="text" id="user" name="username" placeholder="username">
    </div>

    <h2>Password</h2>

    <div class="loginButton">
      <input type="password" id="pass" name="password" placeholder="password">
    </div>

  </form>


</div>

<div>
  <input style="display: none;" type="submit" id="submitHidden" value="hidden">
  <button class="btn btn-info" onclick="$(this).submitForm();">login</button>
</div>

CSS

.red {
  background-color: #f00;
}

#submitHidden {
  display: none;
}

JavaScript

(function($) {

     $(function() {

       function ajaxAuthenticate() {
         var usern = 'test';
         var passw = 'test';

         var user = $("#user").val();
         var pass = $("#pass").val();

         if (usern === user && passw === pass) {
           return true;
         } else {
           return false;
         }
       }

       function startTimer() {
         $(document).keyup(function(e) {
           clearTimeout(window.timer);
           window.timer = setTimeout(function() {
             console.log('ajaxSubmit');
             if (ajaxAuthenticate()) {
               alert("auto login in progress...");
             }
           }, 750);
         });

         $(document).mouseup(function(e) {
           clearTimeout(window.timer);
         });
       };

       $("input").filter(':visible').on('blur', function() {
         if ($(this).hasClass('red') && $(this).val() !== "") {
           $(this).removeClass('red');
         } else if (!$(this).hasClass('red') && $(this).val() === "") {
           $(this).addClass('red');
         }
       });

       $("input").filter(':visible').on('focus', function() {
         startTimer();
       });

     });

     $.fn.submitForm = function() {

       $("input").filter(':visible').on("happy", function() {
         if ($(this).val() === "") {
           $(this).addClass('red');
         }
       });

       $("input").filter(':visible').trigger("happy");


       if ($("#pass").val() != "" && $("#user").val() != "") {
         alert('Form Submitted');
         //$("submitHidden").trigger('click');
       }

     };

   })(jQuery);