├── README.md
└── validation
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── favicon.ico
        ├── index.html
        ├── logo192.png
        ├── logo512.png
        ├── manifest.json
        └── robots.txt
    ├── react-form-validtion.gif
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── Registration
            ├── Registration.css
            ├── Registration.js
            └── RegistrationSchema.js
        ├── index.css
        ├── index.js
        ├── reportWebVitals.js
        └── setupTests.js


/README.md:
--------------------------------------------------------------------------------
 1 | # React form validation using Formik and Yup JavaScript libraries. Simple sign up form example for reactjs form validation using formik and yup validator. 
 2 | 
 3 | This is a simple "User sign up form" developed in bootstrap. <br/>
 4 | 
 5 | I have used <b>"Formik" open source JavaScript library</b> for building and processing the form data in react application.<br/>
 6 | <b>"Yup" schema builder</b> is used for value parsing and validation.<br/>
 7 | 
 8 | ## Live app on stackblitz<br/>
 9 | [https://stackblitz.com/edit/validation-react-form-yup-formik?file=src%2FApp.js](https://stackblitz.com/edit/validation-react-form-yup-formik?file=src%2FApp.js)
10 | 
11 | ## Demo - Sign up form validation in React<br/>
12 | ![React Validation Formik Yup](./validation/react-form-validtion.gif)
13 | 
14 | # Kickstart
15 | 1. Checkout the repository
16 | 2. cd validation
17 | 3. npm install
18 | 4. npm start
19 | 


--------------------------------------------------------------------------------
/validation/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/validation/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "validation",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.17.0",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "bootstrap": "^5.3.0",
10 |     "formik": "^2.4.2",
11 |     "react": "^18.2.0",
12 |     "react-bootstrap": "^2.8.0",
13 |     "react-dom": "^18.2.0",
14 |     "react-icons": "^4.10.1",
15 |     "react-scripts": "5.0.1",
16 |     "web-vitals": "^2.1.4",
17 |     "yup": "^1.2.0"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/validation/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crazyobject/react-validation-formik-yup/cef938f73e97e4a32a4bb26067fb1bc48bad4c15/validation/public/favicon.ico


--------------------------------------------------------------------------------
/validation/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/validation/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crazyobject/react-validation-formik-yup/cef938f73e97e4a32a4bb26067fb1bc48bad4c15/validation/public/logo192.png


--------------------------------------------------------------------------------
/validation/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crazyobject/react-validation-formik-yup/cef938f73e97e4a32a4bb26067fb1bc48bad4c15/validation/public/logo512.png


--------------------------------------------------------------------------------
/validation/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/validation/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/validation/react-form-validtion.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crazyobject/react-validation-formik-yup/cef938f73e97e4a32a4bb26067fb1bc48bad4c15/validation/react-form-validtion.gif


--------------------------------------------------------------------------------
/validation/src/App.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @media (prefers-reduced-motion: no-preference) {
 3 |   .App-logo {
 4 |     animation: App-logo-spin infinite 20s linear;
 5 |   }
 6 | }
 7 | 
 8 | .App-header {
 9 |   background-color: #282c34;
10 |   min-height: 100vh;
11 |   display: flex;
12 |   flex-direction: column;
13 |   align-items: center;
14 |   justify-content: center;
15 |   font-size: calc(10px + 2vmin);
16 |   color: white;
17 | }
18 | 
19 | .App-link {
20 |   color: #61dafb;
21 | }
22 | 
23 | @keyframes App-logo-spin {
24 |   from {
25 |     transform: rotate(0deg);
26 |   }
27 |   to {
28 |     transform: rotate(360deg);
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/validation/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import Registration from "./Registration/Registration";
 3 | import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className="App">
 8 |       <Registration />
 9 |     </div>
10 |   );
11 | }
12 | export default App;
13 | 


--------------------------------------------------------------------------------
/validation/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/validation/src/Registration/Registration.css:
--------------------------------------------------------------------------------
 1 | .form-label{
 2 |     color:gray;
 3 | }
 4 | 
 5 | .actionButtons{
 6 |     text-align: right;
 7 | }
 8 | 
 9 | 
10 | .actionButtons Button {
11 |     margin-left:20px;
12 | }


--------------------------------------------------------------------------------
/validation/src/Registration/Registration.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useFormik } from "formik";
  3 | import "./Registration.css";
  4 | import { Button } from "react-bootstrap";
  5 | import { registrationSchema } from "./RegistrationSchema";
  6 | 
  7 | const initialValues = {
  8 |   first: "",
  9 |   last: "",
 10 |   email: "",
 11 |   repassword: "",
 12 |   password: "",
 13 | };
 14 | 
 15 | const Registration = () => {
 16 |   const {
 17 |     values,
 18 |     errors,
 19 |     touched,
 20 |     handleBlur,
 21 |     handleChange,
 22 |     handleSubmit,
 23 |     resetForm,
 24 |   } = useFormik({
 25 |     initialValues,
 26 |     validationSchema: registrationSchema,
 27 |     onSubmit: (values, action) => {
 28 |       alert(
 29 |         "Form is valid now!. You can make a call to API inside onSubmit function"
 30 |       );
 31 |       action.resetForm();
 32 |     },
 33 |   });
 34 | 
 35 |   return (
 36 |     <div>
 37 |       <section
 38 |         class="p-5 w-100"
 39 |         style={{ backgroundColor: "#eee", borderRadius: ".5rem .5rem 0 0" }}
 40 |       >
 41 |         <div class="row">
 42 |           <div class="col-12">
 43 |             <div class="card text-black" style={{ borderRadius: "25px" }}>
 44 |               <div class="card-body p-md-5">
 45 |                 <div class="row justify-content-center">
 46 |                   <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
 47 |                     <p class="text-center h1 fw-bold mb-5 mt-4">Sign up</p>
 48 |                     <form onSubmit={handleSubmit}>
 49 |                       <div className="row">
 50 |                         <div className="col text-left">
 51 |                           <label htmlFor="first" className="form-label">
 52 |                             First Name
 53 |                           </label>
 54 |                           <input
 55 |                             id="first"
 56 |                             name="first"
 57 |                             className="form-control"
 58 |                             value={values.first}
 59 |                             onChange={handleChange}
 60 |                             onBlur={handleBlur}
 61 |                           />
 62 |                           {errors.first && touched.first ? (
 63 |                             <small className="text-danger mt-1">
 64 |                               {errors.first}
 65 |                             </small>
 66 |                           ) : null}
 67 |                         </div>
 68 |                         <div className="col text-left">
 69 |                           <label htmlFor="last`" className="form-label">
 70 |                             Last Name
 71 |                           </label>
 72 |                           <input
 73 |                             id="last"
 74 |                             name="last"
 75 |                             className="form-control"
 76 |                             value={values.last}
 77 |                             onChange={handleChange}
 78 |                             onBlur={handleBlur}
 79 |                           />
 80 |                           {errors.last && touched.last ? (
 81 |                             <small className="text-danger mt-1">
 82 |                               {errors.last}
 83 |                             </small>
 84 |                           ) : null}
 85 |                         </div>
 86 |                       </div>
 87 |                       <div className="row mt-3">
 88 |                         <div className="col text-left">
 89 |                           <label htmlFor="first" className="form-label">
 90 |                             Email
 91 |                           </label>
 92 |                           <input
 93 |                             id="email"
 94 |                             name="email"
 95 |                             className="form-control"
 96 |                             value={values.email}
 97 |                             onChange={handleChange}
 98 |                             onBlur={handleBlur}
 99 |                           />
100 |                           {errors.email && touched.email ? (
101 |                             <small className="text-danger mt-1">
102 |                               {errors.email}
103 |                             </small>
104 |                           ) : null}
105 |                         </div>
106 |                       </div>
107 |                       <div className="row mt-3">
108 |                         <div className="col text-left">
109 |                           <label htmlFor="first" className="form-label">
110 |                             Password
111 |                           </label>
112 |                           <input
113 |                             id="password"
114 |                             name="password"
115 |                             className="form-control"
116 |                             value={values.password}
117 |                             onChange={handleChange}
118 |                             onBlur={handleBlur}
119 |                             type="password"
120 |                           />
121 |                           {errors.password && touched.password ? (
122 |                             <small className="text-danger mt-1">
123 |                               {errors.password}
124 |                             </small>
125 |                           ) : null}
126 |                         </div>
127 |                       </div>
128 |                       <div className="row mt-3">
129 |                         <div className="col text-left">
130 |                           <label htmlFor="first" className="form-label">
131 |                             Confirm Password
132 |                           </label>
133 |                           <input
134 |                             id="repassword"
135 |                             name="repassword"
136 |                             className="form-control"
137 |                             value={values.repassword}
138 |                             onChange={handleChange}
139 |                             onBlur={handleBlur}
140 |                             type="password"
141 |                           />
142 |                           {errors.repassword && touched.repassword ? (
143 |                             <small className="text-danger mt-1">
144 |                               {errors.repassword}
145 |                             </small>
146 |                           ) : null}
147 |                         </div>
148 |                       </div>
149 |                       <div className="row mt-3">
150 |                         <div className="col text-right actionButtons">
151 |                           <Button
152 |                             variant="secondary"
153 |                             size="sm"
154 |                             onClick={resetForm}
155 |                           >
156 |                             Clear
157 |                           </Button>
158 | 
159 |                           <Button
160 |                             variant="primary"
161 |                             size="sm"
162 |                             onClick={handleSubmit}
163 |                           >
164 |                             Register
165 |                           </Button>
166 |                         </div>
167 |                       </div>
168 |                       <div className="row mt-3">
169 |                         <br />
170 |                         <div className="col text-right">
171 |                           Already have an account? <a href="/">Sign in</a>
172 |                         </div>
173 |                       </div>
174 |                     </form>
175 |                   </div>
176 |                   <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
177 |                     <img
178 |                       src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
179 |                       class="img-fluid"
180 |                       alt=""
181 |                     />
182 |                   </div>
183 |                 </div>
184 |               </div>
185 |             </div>
186 |           </div>
187 |         </div>
188 |       </section>
189 |     </div>
190 |   );
191 | };
192 | 
193 | export default Registration;
194 | 


--------------------------------------------------------------------------------
/validation/src/Registration/RegistrationSchema.js:
--------------------------------------------------------------------------------
 1 | import * as Yup from "yup";
 2 | 
 3 | export const registrationSchema = Yup.object({
 4 |   email: Yup.string().email().required("Email id is required"),
 5 |   first: Yup.string().min(2).max(20).required("First name is required"),
 6 |   last: Yup.string().min(2).max(20).required("Last name is required"),
 7 |   password: Yup.string().min(6).required("Please enter your password"),
 8 |   repassword: Yup.string()
 9 |     .required("Confirm password is required")
10 |     .oneOf([Yup.ref("password"), null], "Password must match"),
11 | });
12 | 


--------------------------------------------------------------------------------
/validation/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/validation/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/validation/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/validation/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------