import React from 'react';

2 import { useFormik } from 'formik';

3 

4 // A custom validation function. This must return an object

5 // which keys are symmetrical to our values/initialValues

6 const validate = values => {

7   const errors = {};

8   if (!values.firstName) {

9     errors.firstName = 'Required';

10   } else if (values.firstName.length > 15) {

11     errors.firstName = 'Must be 15 characters or less';

12   }

13 

14   if (!values.lastName) {

15     errors.lastName = 'Required';

16   } else if (values.lastName.length > 20) {

17     errors.lastName = 'Must be 20 characters or less';

18   }

19 

20   if (!values.email) {

21     errors.email = 'Required';

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

23     errors.email = 'Invalid email address';

24   }

25 

26   return errors;

27 };

28 

29 const SignupForm = () => {

30   // Pass the useFormik() hook initial form values, a validate function that will be called when

31   // form values change or fields are blurred, and a submit function that will

32   // be called when the form is submitted

33   const formik = useFormik({

34     initialValues: {

35       firstName: '',

36       lastName: '',

37       email: '',

38     },

39     validate,

40     onSubmit: values => {

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

42     },

43   });

44   return (

45     <form onSubmit={formik.handleSubmit}>

46       <label htmlFor="firstName">First Name</label>

47       <input

48         id="firstName"

49         name="firstName"

50         type="text"

51         onChange={formik.handleChange}

52         value={formik.values.firstName}

53       />

54       {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}

55 

56       <label htmlFor="lastName">Last Name</label>

57       <input

58         id="lastName"

59         name="lastName"

60         type="text"

61         onChange={formik.handleChange}

62         value={formik.values.lastName}

63       />

64       {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}

65 

66       <label htmlFor="email">Email Address</label>

67       <input

68         id="email"

69         name="email"

70         type="email"

71         onChange={formik.handleChange}

72         value={formik.values.email}

73       />

74       {formik.errors.email ? <div>{formik.errors.email}</div> : null}

75 

76       <button type="submit">Submit</button>

77     </form>

78   );

79 };