Mis restricciones de campo de entrada no funcionan. El formulario envía y registra los datos sin importar las restricciones. ¿Cómo puedo arreglar esto? para el contexto, estoy trabajando en next.js en un archivo .jsx.
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> </> );Su problema es que pone el evento onClick en el botón. Se activará sin importar cuál sea su restricción.
Te sugiero que pongas onSubmit en el form en su lugar. Eso te ayudará a hacer las validaciones primero. Si se pasan todas las validaciones, el evento de envío del formulario se activará correctamente.
Una nota del sitio, todas sus restricciones se aplican al envío del formulario, excepto maxLength , que se aplica directamente en el campo de entrada.
const { useState } = React const App = () => { const [userName, setUsername] = useState() return <form onSubmit={() => console.log('Submitted successfully')}> <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" > Link Name </button> </form> } ReactDOM.render( <App/>, document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>