JSFiddle - React, Tailwind, and code Playground

by Tech Savant

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>
            <button class="btn btn-info" onclick="$(this).submitForm();">login</button>
        </div>

CSS

.red {
    
    
background-color: #f00;
}

JavaScript

(function($){

    $(function(){  
   $("#pass").on('blur', function() {
      $(this).removeClass("red");    
  });
        
    $("#user").on('blur', function() {
      $(this).removeClass("red");    
  });
      

       
 });
       
   
    $.fn.submitForm = function() {
             console.log("in submitForm");
    console.log($("#user").val());

                          

  if($("#pass").val() == ""){
     $("#pass").addClass("red");
  }

         if ($("#user").val() == ""){
     $("#user").addClass("red");
  }

  if( $("#pass").val() != ""  && $("#user").val() != "" ){
        console.log("values are not empty");
       $("#loginSubmit").submit();
  }
  return false;
        };

 })(jQuery);