Використання Formik для валідації форм в React

3 Березня 2024 в 16:11 54

Formik є однією з найпопулярніших бібліотек для управління формами в React. Вона надає зручний спосіб робити валідацію форм і обробку їхнього стану. У цій статті ми детально розглянемо, як використовувати Formik для валідації форм в компонентах React.

Formik дозволяє вам легко створювати форми в React і керувати їхнім станом. Одним з ключових аспектів її функціональності є можливість використовувати валідацію форм. Валідація дозволяє перевіряти дані, які вводить користувач у форму, і показувати повідомлення про помилки, якщо дані недійсні.

Почнемо зі створення простої форми для реєстрації користувача. Ми будемо використовувати Formik для управління станом цієї форми та її валідацією. Ось як виглядає код компонента форми реєстрації:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
const RegisterForm = () => {
  return (
    <Formik
      initialValues={{ fullname: '', email: '', password: '' }}
      validate={values => {
        const errors = {};
        if (!values.fullname) {
          errors.fullname = 'Поле обов\'язкове';
        }
        if (!values.email) {
          errors.email = 'Поле обов\'язкове';
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
          errors.email = 'Неправильний формат електронної пошти';
        }
        if (!values.password) {
          errors.password = 'Поле обов\'язкове';
        } else if (values.password.length < 8) {
          errors.password = 'Пароль повинен містити щонайменше 8 символів';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <Field type="text" name="fullname" placeholder="Ім'я" />
            <ErrorMessage name="fullname" component="div" />
          </div>
          <div>
            <Field type="email" name="email" placeholder="Електронна пошта" />
            <ErrorMessage name="email" component="div" />
          </div>
          <div>
            <Field type="password" name="password" placeholder="Пароль" />
            <ErrorMessage name="password" component="div" />
          </div>
          <button type="submit" disabled={isSubmitting}>
            Зареєструватися
          </button>
        </Form>
      )}
    </Formik>
  );
};
export default RegisterForm;

import React from 'react';

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

const RegisterForm = () => {

return (

<Formik

initialValues={{ fullname: '', email: '', password: '' }}

validate={values => {

const errors = {};

if (!values.fullname) {

errors.fullname = 'Поле обов\'язкове';

}

if (!values.email) {

errors.email = 'Поле обов\'язкове';

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

errors.email = 'Неправильний формат електронної пошти';

}

if (!values.password) {

errors.password = 'Поле обов\'язкове';

} else if (values.password.length < 8) {

errors.password = 'Пароль повинен містити щонайменше 8 символів';

}

return errors;

}}

onSubmit={(values, { setSubmitting }) => {

setTimeout(() => {

alert(JSON.stringify(values, null, 2));

setSubmitting(false);

}, 400);

}}

{({ isSubmitting }) => (

<Form>

<div>

</div>

<div>

</div>

<div>

</div>

Зареєструватися

</button>

</Form>

)}

</Formik>

);

};

export default RegisterForm;

У цьому прикладі ми використовуємо компонент Formik для обгортання нашої форми. Він приймає початкові значення форми та функцію валідації, яка повертає об’єкт з помилками для недійсних полів. Крім того, ми передаємо функцію onSubmit, яка викликається при відправці форми.

До речі, якщо ви хочете вивести повідомлення про помилки під кожним полем форми, ви можете використовувати ErrorMessage компонент з Formik. Цей компонент буде автоматично відображати повідомлення про помилки для відповідного поля, якщо вони є.

Загалом, Formik робить процес управління формами в React дуже зручним і ефективним. Ви можете легко налаштовувати валідацію форм і обробку їхнього стану, що дозволяє зосередитися на функціональності вашого додатку, а не на деталях реалізації форми.