JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="message" style="visibility: hidden;">valid entries must contain the string 'abc'</div>

<form method="POST">
  <input type="text" id="txt" />
  <input type="submit" id="enter" value="enter" style="color: grey;" />
</form>

<script>

  var PATTERN = /abc/;

  $("#enter").hover(
  	function() {
      $("#message").css('visibility', $("#txt").val().match(PATTERN) ? 'hidden' : 'visible');
    },
    $.prototype.css.bind($("#message"), 'visibility', 'hidden')
  );
  
  $('form').submit(function() {
  	return !!$("#txt").val().match(PATTERN);
  });

  $('#txt').on('input', function() {
    $("#enter").css('color', $("#txt").val().match(PATTERN) ? 'black' : 'grey');
  });

</script>