I am working in next.js in a jsx file for context. My input field restrictions are not working and are not restricting the submit button from submitting. How can I fix this?

if (!Boolean(userToken))
  return (
    <>
      <div>
        <p className="">address: {address}</p>
      </div>
      <div
        id="form"
        className="absolute p-10 transform -translate-x-1/2 -translate-y-1/2 border-2 rounded-md shadow-lg top-1/3 left-1/2 "
      >
        <h2 className="flex p-5 text-2xl font-semibold"> Link Username </h2>
        <form id="" className="">
          <input
            id="username"
            className="m-5 border-2 rounded outline-0 focus:bg-slate-100 hover:bg-slate-50"
            type="text"
            value={userName}
            onChange={(event) => setUsername(event.target.value)}
            required
            minLength="3"
            maxLength="30"
            pattern="[a-zA-Z0-9_]+"
            title="only letters, numbers, and underscores."
          />
          <button
            className="p-1 rounded hover:bg-slate-100 actve:bg-slate-200"
            type="submit"
            onClick={(e) => writeUserData(address, userName)}
          >
            Link Name
          </button>
        </form>
      </div>
    </>
  );