JSFiddle - React, Tailwind, and code Playground

by Jacob Stamm

HTML

<form onsubmit="event.preventDefault(); alert('Form submitted');" action="post">
  <input id="UserName" type="text" pattern="^((?!@).)*$" required />
  <button type="submit">Submit</button>
</form>

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const txtUsername = document.getElementById("UserName");
  txtUsername.oninvalid = function (e)
  {
    const input = e.target;
    if (input.validity.patternMismatch)
    {
      input.setCustomValidity("Usernames cannot contain the @ symbol");
    }
    console.log("'oninvalid' fired");
  }
})