Commit 699bd15c authored by David Haynes's avatar David Haynes 🙆

Add an example formik + yup form

- super duper nice
parent e2db427d
Pipeline #3554 passed with stage
in 1 minute and 10 seconds
import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
const SignupSchema = Yup.object().shape({
password: Yup.string()
.min(2, "Too Short!")
.max(50, "Too Long!"),
email: Yup.string()
.email("Invalid email")
.required("Required")
});
const DebugCRUD = () => (
<div>
<h1>Debug CRUD Page</h1>
<div>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
</div>
</div>
);
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment