formikForm.jsx

import React from "react";
import { Formik, Field, ErrorMessage, Form } from "formik";
import * as Yup from "yup";
//import Error from "./Error";
import styled from "styled-components";

const Button = styled.button`
  background: gray;
  color: navy;
  width: 30%;
  border-radius: 5px;
  font-size: 20px;
  padding: 5px 0px;
  border: 1px solid #607d8b;
  cursor: pointer;
`;

// Yup Schema
const schema = Yup.object().shape({
  name: Yup.string()
    .min(5, "Name Must Be At Least 5 Characters")
    .max(25, "Too Many Characters")
    .required("Name Required"),
  email: Yup.string()
    .email("Please Enter a valid Email")
    .required("Email Required")
});

const FormikForm2 = () => {
  return (
    <Formik
      initialValues={{ name: "", email: "" }}
      validationSchema={schema}
      onSubmit={(values, { setSubmitting, resetForm }) => {
        setSubmitting(true);
        alert(JSON.stringify(values, null, 2));
        resetForm();
        setSubmitting(false);
      }}
    >
      {({ errors, touched, isSubmitting }) => (
        <Form>
          <div className="input-row">
            <label htmlFor="name">Name</label>
            <Field
              type="text"
              name="name"
              id="name"
              placeholder="Enter Your Name"
              className={touched.name && errors.name ? "has-error" : null}
            />
            <ErrorMessage name="name" />
          </div>

          <div className="input-row">
            <label htmlFor="email">Email</label>
            <Field
              type="email"
              name="email"
              id="email"
              placeholder="Enter Your Email"
              className={touched.email && errors.email ? "has-error" : null}
            />
            <ErrorMessage name="email" />
          </div>

          <div className="input-row">
            <Button disabled={isSubmitting} type="submit">
              Submit
            </Button>
          </div>
        </Form>
      )}
    </Formik>
  );
};

export default FormikForm2;