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