My input field restrictions arent working and it doesnt stop the submit button from working. I took out a majority of the code on the page to focus on the problem. None of my restrictions work. I am also having this problem in other spots on my page, but I'm guessing its one fix for all.
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>
</>
);
}