1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import './App.css';import { useForm } from 'react-hook-form';function App() { const { register, handleSubmit, formState: {errors}, } = useForm(); const onSubmit = (data) => console.log(data); return ( <div className="App"> <h1>login</h1> <form onSubmit={handleSubmit(onSubmit)}> <div> <label htmlFor="email">Email</label> <input id="email" {...register('email', { required: true })} /> {errors.email && <div>入力が必須の項目です</div>} </div> <div> <label htmlFor="password">パスワード</label> <input id="password" {...register('password')} type="password" /> </div> <div> <button type="submit">Login</button> </div> </form> </div> );} |
複数のエラーメッセージ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function App() { const { register, handleSubmit, formState: {errors}, } = useForm({ criteriaMode: 'all', });<label htmlFor="password">パスワード</label> <input id="password" {...register('password', { required: { value: true, message: '入力が必須の項目です。', }, pattern: { value: /^[A-Za-z]+$/, message: 'アルファベットのみ入力してください。' }, minLength: { value: 8, message: '8文字以上入力してください。' } })} type="password" /> {errors.password?.type === 'required' && (<div>{errors.password.types.required}</div>)} {errors.password?.type === 'pattern' && (<div>{errors.password.types.pattern}</div>)} {errors.password?.type === 'minLength' && (<div>8文字以上入力してください。</div>)} </div> |
バリデーションのタイミングは制御できる
reValidateMode: ‘onSubmit’,
mode: ‘onChange’,
なるほど、何となくわかってきました。
さぁ、実装していきますか…
