JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

JavaScript

$(document).ready(function() {
//this function shows alert when fields are left empty
$("#username").blur(function() {
    if($(this).val() == ''){
        alert('Username cannot be empty'); 
    }
    
});

$("#password").blur(function() {
    if($(this).val() == ''){
        alert('Password cannot be empty'); 
    }
    });
    
    
    
    //this function disables button. It'll only be enabled when the fields are not empty
 
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});