これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の12日目の記事です。

react-jsonschema-form (RJSF) では、フォームの入力値に対するvalidatorとして ajv を使います。
Validation | react-jsonschema-form

ajv には複数のオプションがあり、実行時の挙動を変更できます。
Ajv options | Ajv JSON schema validator

そこで、RJSFでも ajv のオプションを設定・利用できるかためしてみます。

環境
RJSFでajvのオプションを変更する
ajvがサポートするJSON Schemaバージョンを差し替える
ソースコード

環境

react-jsonschema-form 5.15.0
React 18.2.0
React Router 6.20.1

RJSFでajvのオプションを変更する

RJFSからajvのオプションを変更する方法は、以下の公式ドキュメントに記載されています。
ajvOptionsOverrides | Validation | react-jsonschema-form

　
そこで、以下のようにオプションを変更してみます。

allErrors を true にする
- https://ajv.js.org/options.html#allerrors
- 1つの項目に対する複数のエラーメッセージを表示する
$comment を true にする
- https://ajv.js.org/options.html#comment
- JSON Schemaの $comment をコンソール表示する

　
まず、オプションが有効になっているか確認できるよう、JSON Schemaを

$comment を定義
1つの項目に対して minLength と pattern を定義

とします。

なお、patternについては、Understanding JSON Schemaのページのものを使っています。
JSON Schema - Regular Expressions

const schema: RJSFSchema = {
  title: "Additional Ajx Option Form",
  type: "object",
  $comment: "my comment",
  properties: {
    stringInput: {
      type: "string",
      minLength: 5,
      pattern: "^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
    }
  }
}

　
続いて、ajvのオプションを定義したオブジェクトを customizeValidator の引数として渡してvalidatorを生成し、それをFormのpropsとして渡します。

なお、公式ドキュメントの渡し方だとうまく動作しなかったため、以下のような実装としています。

const options: CustomValidatorOptionsType = {
  ajvOptionsOverrides: {
    // https://ajv.js.org/options.html#allerrors
    allErrors: true,
    // https://ajv.js.org/options.html#comment
    $comment: true,
  }
}

const validator = customizeValidator(options)

return (
  <div style={{width: '400px'}}>
    <Form
      schema={schema}
      validator={validator}
    />
  </div>
)

　
動かしてみたところ、

1つの項目に対する複数のエラーメッセージを表示する
JSON Schemaの $comment をコンソール表示する

が実現できていました。

ajvがサポートするJSON Schemaバージョンを差し替える

RJSFでは、 customValidator 関数に AjvClass を渡すことで、バリデーションの元となるJSON Schemaのバージョンを切り替えられます。
AjvClass | Validation | react-jsonschema-form

　
ただ、

RJSFがJSON Schema draft-7 対応なので、 RJSFSchema 型のschemaで定義すると型エラーになる
- 例えば、draft 2019-09より追加された minContains: 1 を指定するとエラー
  - https://json-schema.org/draft/2019-09/release-notes#validation-vocabulary
  - Initializer type {title: string, type: "object", properties: {arayInput: {type: "array", items: {type: "object", properties: {stringInput: {type: ...}, integerInput: {type: ...}}}, minContains: number}}} is not assignable to variable type RJSFSchema
ajvは draft-7 時点でも、 draft 2019-09 で追加されたフォーマット duration や uuid に対応済
- https://json-schema.org/draft/2019-09/release-notes#format-vocabulary
- ajv 8では、 ajv-formats を使っているため
  - https://ajv.js.org/json-schema.html#format
  - https://github.com/ajv-validator/ajv-formats
ajv-formats は idn-hostname などを扱えず、draft 2019-09 に完全対応しているわけではない
- プラグイン ajv-formats-draft2019 を使えば扱える
  - https://github.com/luzlab/ajv-formats-draft2019