JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<input data-default-val='my default val' value='I am never empty.'>

<input class='warnOnEmpty' value='I warn when empty.'>

CSS

.error-border { 
    border:1px solid red;
  }

JavaScript

// sellarafaeli.com. 

//1. For inputs with data-default-val, use default value when empty.

function resetOnEmpty(event) {  
  var elem = event.target;
  if (!elem.value) { 
    elem.value = elem.dataset['defaultVal'];
  }
}

$('[data-default-val]').on('blur', resetOnEmpty)

//2. For inputs with 'warnOnEmpty' class, use red warning when empty.

function warnOnEmptyInput(selectorStr) {
  var elems = $(selectorStr);
  elems.focus(function(){ $(this).removeClass('error-border') });
  elems.blur(function(){ 
    if (!this.value.length) { 
      $(this).addClass('error-border') 
    }
  });
}

warnOnEmptyInput('.warnOnEmpty');