Can someone suggest an HTML oninvalid Event Attribute work around in the context of my code?

Does anyone have a work around for Safari and google chrome for the HTML oninvalid Event Attribute not correctly working? In the context of my application, within the name field at first, I inputted an invalid answer which was a number, then after I corrected the answer to a valid input. However, the input “ededde” didn’t work which is a valid input that should be accepted. Here is my demonstration video. Maybe I made a syntax error or the attribute isn’t supported anymore?

What alternative method could I use, which would allow me to manually customise the error message for each input field and correctly work when the user changes their input from invalid to valid? I saw one solution one stack overflow, but the solution didn’t cover multiple different input fields like my example code.

In additon, I was also reading another post and I saw someone wrote a JS script but the code appeared to be very complex for this sort of task. Therefore, I thought in the context of my code to get some guidance I would make this post as I’m really having trouble overcoming this glitch, unsupported attribute problem or a syntax error which I possibly made.

Below is my code which is relevant to the issue, if you need to see more let me know.

MY CODE

<div class="mb-3 text-white">
   <label>Name</label>
   <input
      type="text"
      name="name"
      pattern="[A-Za-z]"
      oninvalid="alert('NAME ERROR: Please eneter characters only.');" required>
</div>
<div class="mb-3 text-white">
   <label>Barcode</label>
   <input
      type="text"
      name="barcode"
      oninvalid="alert('BARCODE ERROR: Please input barcode here.');" required>
</div>
<div class="mb-3 text-white">
   <label>Email</label>
   <input
      type="email"
      name="email"
      oninvalid="alert('EMAIL ERROR: Please input email here.');" 
      required
      >
</div>

Answer

That is because your pattern only accepts a single alphabet: [A-Za-z]. To accept an alphabetical string that has length of 1 or more, you need to add a + at the end, i.e. [A-Za-z]+:

// This JS is only for demo purposes, so that a successful validation will not submit the form in the demo snippet
document.querySelector('#my-form').addEventListener('submit', e => {
  console.log('Form valid! Will submit, but submission is prevented for demo purposes');
  e.preventDefault();
});

<form id="my-form">
  <div class="mb-3 text-white">
    <label>Name</label>
    <input type="text" name="name" pattern="[A-Za-z]+" oninvalid="alert('NAME ERROR: Please eneter characters only.');" required>
  </div>
  <button>Submit</button>
</form>

On a side note, I strongly suggest not using inline JS. What you want to do can be easily done in JS: and you can also store the intended error message in data- attributes for convenience:

// This JS is only for demo purposes, so that a successful validation will not submit the form in the demo snippet
document.querySelector('#my-form').addEventListener('submit', e => {
  console.log('Form valid! Will submit, but submission is prevented for demo purposes');
  e.preventDefault();
});

document.querySelectorAll('input').forEach(el => {
  const invalidMessageElement = el.nextElementSibling;
  el.addEventListener('invalid', () => {
    invalidMessageElement.textContent = el.dataset.invalidMessage;
    invalidMessageElement.classList.add('visible');
  });
  
  el.addEventListener('input', () => {
    invalidMessageElement.textContent = '';
    invalidMessageElement.classList.remove('visible');
  });
});

.invalid-message {
  display: none;
  color: red;
}

.invalid-message.visible {
  display: inline;
}

<form id="my-form">
  <div class="mb-3 text-white">
    <label>Name</label>
    <input type="text" name="name" pattern="[A-Za-z]+" required data-invalid-message="Please enter characters only."><span class="invalid-message"></span>
  </div>
  <div class="mb-3 text-white">
    <label>Barcode</label>
    <input type="text" name="barcode" required data-invalid-message="Please input barcode here."><span class="invalid-message"></span>
  </div>
  <div class="mb-3 text-white">
    <label>Email</label>
    <input type="email" name="email" required data-invalid-message"Please input email here."><span class="invalid-message"></span>
  </div>
  <button>Submit</button>
</form>