Las restricciones de mi campo de entrada no funcionan y no impiden que funcione el botón Enviar. Saqué la mayor parte del código de la página para centrarme en el problema. Ninguna de mis restricciones funciona. También tengo este problema en otros lugares de mi página, pero supongo que es una solución para todos.
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> </> ); }