JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>

JavaScript

const nameField = document.querySelector('input');

nameField.addEventListener('input', () => {
  nameField.setCustomValidity('');
  nameField.checkValidity();
    console.log(nameField.checkValidity());

});

nameField.addEventListener('invalid', () => {
  nameField.setCustomValidity('Please fill in your First Name.');
})