JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<input type="text" id="myInput">
<div id="alertDiv">Value should not be empty!</div>

CSS

#alertDiv {
  display: none;
  color: red;
}

JavaScript

$(document).ready(function() {
  var inputField = $('#myInput');
  var alertDiv = $('#alertDiv');

  inputField.on('input', function() {
    if (inputField.val().trim() === '') {
      alertDiv.fadeIn();
    } else {
      alertDiv.fadeOut();
    }
  });
});