data-driven-formsでバリデーションを実装

やりたいこと

テキストボックスに桁数、最大、最小、全角、半角のバリデーションを入れる。

実装

codeSandboxでバリデーションを入れたテキストボックスを作成しました。

コード全文は下記の通りです。

App.js

import React from "react";
import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
import validatorTypes from "@data-driven-forms/react-form-renderer/validator-types";
import TextField from "@data-driven-forms/mui-component-mapper/text-field";
import FormTemplate from "@data-driven-forms/mui-component-mapper/form-template";

const schema = {
  title: "Validator mapper",
  fields: [
    {
      component: componentTypes.TEXT_FIELD,
      name: "桁数チェック",
      label: "桁数チェック",
      helperText: "5文字以上10文字以下",
      validate: [
        {
          type: validatorTypes.MIN_LENGTH,
          threshold: 5,
          message: "5文字以上で入力してください。"

        },
        {
          type: validatorTypes.MAX_LENGTH,
          threshold: 10,
          message: "10文字以下で入力してください。"
        }
      ]
    },
    {
      component: componentTypes.TEXT_FIELD,
      name: "数値の最大最小",
      label: "数値の最大最小",
      helperText: "1以上30以下",
      type: "number",
      validate: [
        {
          type: validatorTypes.MIN_NUMBER_VALUE,
          includeThreshold: true,
          value: 1,
          message: "1以上30以下で入力してください。"
        },
        {
          type: validatorTypes.MAX_NUMBER_VALUE,
          includeThreshold: true,
          value: 30,
          message: "1以上30以下で入力してください。"
        }
      ]
    },
    {
      label: "半角チェック",
      component: componentTypes.TEXT_FIELD,
      name: "半角チェック",
      helperText: "半角英数のみ",
      validate: [{ type: "halfwidth" }]
    },
    {
      label: "全角チェック",
      component: componentTypes.TEXT_FIELD,
      name: "全角チェック",
      helperText: "全角英数かな",
      validate: [{ type: "fullwidth" }]
    }
  ]
};

const componentMapper = {
  [componentTypes.TEXT_FIELD]: TextField
};

const validatorMapper = {
  halfwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[a-zA-Z0-9]+$/)) {
      return message || "半角入力のみ";
    }
  },

  fullwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[ａ-ｚＡ-Ｚ０-９ぁ-んァ-ン]+$/)) {
      return message || "全角入力のみ";
    }
  }
};

const ValidatorMapper = () => (
  <FormRenderer
    FormTemplate={FormTemplate}
    validatorMapper={validatorMapper}
    componentMapper={componentMapper}
    schema={schema}
    onSubmit={console.log}
  />
);

export default ValidatorMapper;

1. 桁数のバリデーション

Length-Validatorを使う

MIN_LENGTHでテキストの最小の長さを、MAX_LENGTHでテキストの最大の長さをチェックします。また、EXACT_LENGTHでテキストの正確な長さをチェックします。
バリデーターの閾値はthreshold: numberで指定します。

2. 数字の最大値、最小値のバリデーション

Number value Validatorを使う

MIN_NUMBER_VALUEで数値が値よりも小さいかどうか、MAX_NUMBER_VALUEで数値が値よりも大きいかどうかをチェックします。
includeThreshold: true,の場合は閾値を含む範囲、includeThreshold: false,の場合は閾値を含まない範囲となり、デフォルトはtrueとなっています。

3. 全角、半角のバリデーション

Custom Validatorを使う

data-driven-formsのデフォルトでは全角、半角のバリデーションがなかったため、カスタムバリデーターを使って自作します。

正規表現を使って半角のみ、全角のみのvalidatorMapper を作成。
半角入力のみをhalfwidth、全角入力のみをfullwidthとしています。

App.js

const validatorMapper = {
  halfwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[a-zA-Z0-9]+$/)) {
      return message || "半角入力のみ";
    }
  },

  fullwidth: ({ message }) => (value) => {
    if (!value) {
      return;
    }

    if (!value.match(/^[ａ-ｚＡ-Ｚ０-９ぁ-んァ-ン]+$/)) {
      return message || "全角入力のみ";
    }
  }
};

schemaのバリデートのタイプにvalidatorMapperの中で定義したものを指定する。
半角入力のみのバリデーションを行う場合　
validate: [{ type: "halfwidth" }]
半角入力のみのバリデーションを行う場合　
validate: [{ type: "fullwidth" }]

最後に

エラー時のエラーメッセージはvalidateの中でmessage: "エラーメッセージの内容"とすることで表示させることができます。
また、半角、全角チェックの他に、数字のみやemail、郵便番号といった入力チェックを行いたい場合もカスタムバリデーター、正規表現を使って対応可能だと思います。