JSFiddle - React, Tailwind, and code Playground

by caio

HTML

<form action="?" method="post">
  <input type="text" pattern="[a-zA-Z]+" title="I.e.: David" data-error-message="Please, enter only alphanumeric." required>
  <button type="submit">Send</button>
</form>

JavaScript

$('form :input:not(:button)').on({
  change: function() {
    try {
      this.setCustomValidity('');
    } catch(_error) {}
  },
  invalid: function() {
    this.setCustomValidity($(this).data('error-message'));
  }
});