NurUddinShohan

Formik nd Yup

Dec 4th, 2021
704
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import { useFormik } from 'formik';
  3. import * as Yup from 'yup';
  4.  
  5. const validationSchema = Yup.object({
  6.   firstName: Yup.string().required("Required"),
  7.   lastName: Yup.string().min(3).required("Required"),
  8.   email: Yup.string().email().required("Required"),
  9.  
  10.  
  11. });
  12. export default function Register() {
  13.     const { handleSubmit, handleChange, values, errors } = useFormik({
  14.         initialValues: {
  15.             firstName: '',
  16.             lastName: '',
  17.             email: '',
  18.         },  
  19.         validationSchema,
  20.         onSubmit: values => {
  21.             alert(JSON.stringify(values, null, 2));
  22.         },
  23.     });
  24.     return (
  25.         <form onSubmit={handleSubmit}>
  26.             <label htmlFor="firstName">First Name</label>
  27.             <input
  28.                 id="firstName"
  29.                 name="firstName"
  30.                 type="text"
  31.                 onChange={handleChange}
  32.                 value={values.firstName}
  33.             />
  34.             {errors.firstName ? errors.firstName : null}
  35.             <label htmlFor="lastName">Last Name</label>
  36.             <input
  37.                 id="lastName"
  38.                 name="lastName"
  39.                 type="text"
  40.                 onChange={handleChange}
  41.                 value={values.lastName}
  42.             />
  43.             {errors.lastName ? errors.lastName : null}
  44.  
  45.             <label htmlFor="email">Email Address</label>
  46.             <input
  47.                 id="email"
  48.                 name="email"
  49.                 onChange={handleChange}
  50.                 value={values.email}
  51.             />
  52.             {errors.email ? errors.email : null}
  53.  
  54.             <button type="submit">Submit</button>
  55.         </form>
  56.     )
  57. }
  58.  
RAW Paste Data