React-hook-formとyupを使ったバリデーションの実装

今回は、React-hook-formとyupを利用して、ログインフォームのバリデーション処理を実装していきます。

実装

１）各パッケージのインストール

Reactでバリデーションを実装する際に必要なパッケージをインストールします。
今回インストールするパッケージは以下となります。

パッケージ名	インストールバージョン	機能
yup	0.32.11	バリデーションのためのライブラリ
react-hook-form	7.34.2	フォームバリデーションライブラリ
@hookform	2.9.7

　①React-hook-formのインストール

　以下のコマンドを実行すると、インストール開始します。

$ npm install react-hook-form

　②@hookform/resolversのインストール

以下のコマンドを実行すると、インストールが開始します。

 $npm install @hookform/resolvers

　③yupのインストール

以下のコマンドを実行すると、インストール開始します。

npm install yup

２）実装

今回は、ログイン画面を作成し、その中でバリデーションチェックを実装していきます。
先ずはログイン画面を実装していきます。

　①先ずは、ログイン画面を実装します。

Auth_login.tsx

import { useTranslation } from "react-i18next";

    
function Auth_Login() {
    const { t } = useTranslation();

    return (
        <div className="col-sm-8 offset-sm-4 mt-5">
            <h2>{t('auth.title')}</h2>
            <br></br>
            <form name="form">
                <div className="form-group col-sm-4">
                    <label>{t('auth.usercd')}</label>
                    <input type="text" className="form-control"></input>
                </div>
                <br></br>
                <div className="form-group col-sm-4">
                    <label>{t('auth.password')}</label>
                    <input type="password" className="form-control"></input>
                </div>
                <br></br>
                <button className="btn btn-primary">{t('auth.signin')}</button>

            </form>

        </div>
    )
}

export { Auth_Login };

　②バリデーション機能を実装します。

Auth_Login.tsx

import { useTranslation } from "react-i18next";
import * as Yup from 'yup';                                 //【追記】Yupのインポート
import { yupResolver } from '@hookform/resolvers/yup';      //【追記】hookformのインポート
import { useForm } from "react-hook-form";                  //【追記】react-hook-formのインポート

function Auth_Login() {
    const { t } = useTranslation();


    //【追記】バリデーションのルール設定
    const validationSchema = Yup.object().shape({
        username: Yup.string().required(t("auth.message.required_usercd")),
        password: Yup.string().required(t("auth.message.required_password"))
    })
    
    // 【追記】useForm hooksの設定
    const formOptions = { resolver: yupResolver(validationSchema) };
    const { register, handleSubmit, formState } = useForm(formOptions);
    const { errors, isSubmitting } = formState;

    //SignInボタン押下時の処理を設定
    function onSubmit() {
        alert('SUCCESS!!');
    }

    return (
        <div className="col-sm-8 offset-sm-4 mt-5">
            <h2>{t('auth.title')}</h2>
            <br></br>
            <form name="form" onSubmit={handleSubmit(onSubmit)}>
                <div className="form-group col-sm-4">
                    <label>{t('auth.usercd')}</label>
                    <input type="text" {...register('username')} className={`form-control  ${errors.username ? 'is-invalid' : ''}`}></input>
                    <div className="invalid-feedback">{t("auth.message.required_usercd")}</div>
                </div>
                <br></br>
                <div className="form-group col-sm-4">
                    <label>{t('auth.password')}</label>
                    <input type="password"  {...register('password')} className={`form-control  ${errors.password ? 'is-invalid' : ''}`}></input>
                    <div className="invalid-feedback">{ t("auth.message.required_password") }</div>
                </div>
                <br></br>
                <button className="btn btn-primary">{t('auth.signin')}</button>

            </form>

        </div>
    )
}

export { Auth_Login };

　

３）動作検証

以下のコマンドを実行し、Reactアプリを実行します。

& npm start

以下の様な、何の変哲もないログイン画面が表示されます。

「ユーザーコード」、「パスワード」に何も入力しない状態で、「サインイン」ボタンをクリックしたら、以下の様に、エラーが表示されました。

入力項目に値を入力すると、エラーは表示されなくなります。

ユーザコードとパスワードに値を入力し、「サインイン」ボタンをクリックすると、「SUCCESS!!」と表示されました。

今回はここまでとなります。
次回は、Reduxを利用して状態管理を実装していきます。