React Academy · レッスン

バリデーションルールとエラーメッセージ

組み込みのバリデーションルール（required、minLength、pattern）を適用し、エラーメッセージを表示します。

「バリデーションルールとエラーメッセージ」はCoddyKit上の無料React Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React Hook Formのフィールドに組み込みの検証ルールを追加し、各入力項目の下に分かりやすいエラーメッセージを表示します。

組み込みの検証ルール

register()の2番目の引数としてrulesオブジェクトを渡します。組み込みのルールには、`required`、`minLength`、`maxLength`、`min`、`max`、`pattern`、`validate`があります。

<input
  {...register('email', {
    required: 'Email is required',
    pattern: {
      value: /^[^@]+@[^@]+\.[^@]+$/,
      message: 'Invalid email address',
    },
  })}
/>

必須フィールド

`required`に文字列を設定すると、フィールドを必須にできます。その文字列がエラーメッセージになります。`true`を設定すると、汎用的なメッセージが使用されます。

register('name', { required: 'Name is required' })
// or
register('name', { required: true })

長さの制約

`minLength`と`maxLength`に`{ value, message }`オブジェクトを指定すると、文字数の制限とカスタムエラーメッセージを設定できます。

register('username', {
  minLength: { value: 3, message: 'At least 3 characters' },
  maxLength: { value: 20, message: 'At most 20 characters' },
})

パターン検証

`pattern`ルールはRegExp値を受け取ります。メールアドレスの形式、電話番号、その他の文字列パターンの検証に使用します。

register('phone', {
  pattern: {
    value: /^[0-9]{10,11}$/,
    message: 'Enter a valid phone number',
  },
})

エラーの表示

formStateから`errors`オブジェクトを読み取ります。検証に失敗した各フィールドには、`message`プロパティを含むエントリがあります。条件に応じて入力項目の下に表示します。

const { register, handleSubmit, formState: { errors } } = useForm();

<input {...register('email', { required: 'Required' })} />
{errors.email && <p className="error">{errors.email.message}</p>}

validateによるカスタム検証

`validate`ルールは、入力値が有効な場合に`true`、無効な場合にエラー文字列を返す関数を受け取ります。組み込みルールでは表現できないビジネスロジックに使用します。

register('age', {
  validate: value =>
    parseInt(value) >= 18 || 'You must be at least 18',
})

複数のカスタム検証関数

名前付き検証関数のオブジェクトを`validate`に渡すと、同じフィールドに対して複数のカスタムチェックを実行できます。

register('password', {
  validate: {
    hasUpper: v => /[A-Z]/.test(v) || 'Needs uppercase',
    hasDigit: v => /[0-9]/.test(v) || 'Needs a number',
  }
})

エラー数の表示

送信ボタンの有効化・無効化や概要の表示のために、エラーの合計数を数えます。Object.keys(errors).lengthを使用します。

const hasErrors = Object.keys(errors).length > 0;
<button type="submit" disabled={hasErrors}>Submit</button>

エラーのある入力項目のスタイル設定

エラーのある入力項目にCSSクラスを適用して、赤い境界線を表示します。errors[fieldName]を確認し、条件に応じてクラスを適用します。

<input
  {...register('email', { required: true })}
  className={errors.email ? 'input-error' : ''}
/>

確認

React Hook Formで、'email'という名前のフィールドのエラーメッセージを表示するにはどうすればよいですか？

まとめ

検証ルールをregister()の2番目の引数として追加します。ルールにはrequired、minLength、maxLength、pattern、min、max、validateがあります。formStateからerrors[fieldName].messageを読み取り、メッセージを表示します。

次のレッスン：**Zodによるスキーマ検証** — @hookform/resolversとZodスキーマを統合し、型安全なフォーム検証を実現します。

よくある質問