html 输入字段限制

Question

My input field restrictions are not working. The form submits and logs the data no matter the restrictions. How can I fix this? for context I am working in next.js in a.jsx file.

 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> </> )

Answer 1

Your problem is you put onClick event on the button. It will trigger no matter what your restriction is.

I'd suggest that you should put onSubmit on form instead. That will help you to do the validations first. If all validations are passed, the form submission event will be triggered properly.

One site note, all your restrictions are applied on form submission except maxLength , which is applied directly on the input field.

 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>