Registration page with Formik validation in react js

Step 1: Create new Project

First, make sure you have Node.js installed on your system. Then, create a new React app using Create React App:

npx create-react-app RegistrationForm
cd RegistrationForm

Step 2: Install Formik and Yup for form validation:

npm install formik yup

Step 3:

Create a new file named RegistrationForm.js in the src directory:

// RegistrationForm.js
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const RegistrationForm = () => {
  return (
    <div>
      <h1>Register</h1>
      <Formik
        initialValues={{
          username: '',
          email: '',
          password: '',
          confirmPassword: '',
          gender: '',
          birthday: '',
          interests: [],
          bio: '',
          phoneNumber: '',
        }}
        validationSchema={Yup.object().shape({
          username: Yup.string().required('Username is required'),
          email: Yup.string().email('Invalid email').required('Email is required'),
          password: Yup.string().required('Password is required'),
          confirmPassword: Yup.string()
            .oneOf([Yup.ref('password'), null], 'Passwords must match')
            .required('Confirm Password is required'),
          gender: Yup.string().required('Gender is required'),
          birthday: Yup.date().required('Birthday is required'),
          interests: Yup.array().min(1, 'Select at least one interest'),
          bio: Yup.string().required('Bio is required'),
          phoneNumber: Yup.string()
            .matches(/^[0-9]+$/, 'Must be only digits')
            .min(10, 'Must be exactly 10 digits')
            .max(10, 'Must be exactly 10 digits')
            .required('Phone number is required'),
        })}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        {({ isSubmitting }) => (
          <Form>
            <Field type="text" name="username" placeholder="Username" />
            <ErrorMessage name="username" component="div" />

            <Field type="email" name="email" placeholder="Email" />
            <ErrorMessage name="email" component="div" />

            <Field type="password" name="password" placeholder="Password" />
            <ErrorMessage name="password" component="div" />

            <Field type="password" name="confirmPassword" placeholder="Confirm Password" />
            <ErrorMessage name="confirmPassword" component="div" />

            <div>
              <Field type="radio" name="gender" value="male" /> Male
              <Field type="radio" name="gender" value="female" /> Female
            </div>
            <ErrorMessage name="gender" component="div" />

            <Field type="date" name="birthday" />
            <ErrorMessage name="birthday" component="div" />

            <div>
              <label>Interests:</label>
              <Field type="checkbox" name="interests" value="sports" /> Sports
              <Field type="checkbox" name="interests" value="music" /> Music
              <Field type="checkbox" name="interests" value="technology" /> Technology
            </div>
            <ErrorMessage name="interests" component="div" />

            <Field as="textarea" name="bio" placeholder="Bio" />
            <ErrorMessage name="bio" component="div" />

            <Field type="tel" name="phoneNumber" placeholder="Phone Number" />
            <ErrorMessage name="phoneNumber" component="div" />

            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default RegistrationForm;

This form includes various input fields like text, email, password, radio buttons, checkboxes, date, textarea, and tel (for phone number) with their corresponding validation using Yup. You can customize it further according to your requirements.

Step 4:

Finally, let’s modify App.js to include the RegistrationForm component:

// App.js
import React from 'react';
import RegistrationForm from './RegistrationForm';

const App = () => {
  return (
    <div>
      <RegistrationForm />
    </div>
  );
};

export default App;

Now, you have a basic Registration page with form validation using Formik in your React.js application. You can expand upon this by adding more features like login, authentication, and integrating it with a backend server for real-world usage.

1 thought on “Registration page with Formik validation in react js”

Lazernoe_aroi 7 July 2024 at 19:07


Как работает лазерное удаление папиллом? – Лазер направляет сфокусированный луч света на папиллому, что вызывает нагревание и испарение пораженных тканей, не повреждая окружающую здоровую кожу.
How does laser removal of papillomas work? – The laser directs a focused beam of light at the papilloma, causing the affected tissue to heat and vaporize, without damaging the surrounding healthy skin.
записаться на удаление папиллом http://www.laser-removal-of-papillomas.ru/ .