😎

【Web Library】Nextjs13で覚える便利なライブラリ【#７Formik】

2023/03/01に公開

Next.js

tech

【#７Formik】

YouTube: https://youtu.be/6U4GAM8tPRA

https://youtu.be/6U4GAM8tPRA

今回からフォームにバリデーションを設定するライブラリ
「Formik」について解説します。

https://formik.org/

今回は、インストールとページの下準備を行います。

 npm install formik --save
 
  "dependencies": {
    "formik": "2.2.9",
  },

app/formik/basic/page.tsx

'use client';
import { Formik, Form, Field, ErrorMessage, FormikErrors } from 'formik';

interface FormikValues {
  email: string;
  password: string;
}

const Page = () => {
  return (
    <div>
      <h1>Any place in your app!</h1>
      <Formik
        initialValues={{ email: '', password: '' }}
        validate={(values) => {
          const errors: FormikErrors<FormikValues> = {};

          if (!values.email) {
            errors.email = 'Required';
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = 'Invalid email address';
          }

          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));

            setSubmitting(false);
          }, 400);
        }}
      >
        {({ isSubmitting }) => (
          <Form>
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" />
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default Page;

【#７Formik】

Discussion