01
Build a login form with basic validation in React.
Show answer
function LoginForm({ onLogin }) {
const [form, setForm] = useState({ email: '', password: '' });
const [errors, setErrors] = useState({});
const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value });
const handleSubmit = e => {
e.preventDefault();
const errs = {};
if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'Enter a valid email';
if (form.password.length < 8) errs.password = 'Minimum 8 characters';
setErrors(errs);
if (Object.keys(errs).length === 0) onLogin(form);
};
return (
<form onSubmit={handleSubmit}>
<input name="email" value={form.email} onChange={handleChange} />
{errors.email && <span>{errors.email}</span>}
<input name="password" type="password" value={form.password} onChange={handleChange} />
{errors.password && <span>{errors.password}</span>}
<button type="submit">Login</button>
</form>
);
}