cleanup and validation

components/Input/Input.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Input = (
-    { htmlFor, spanLabel, id, type, name, placeholder, onChange, value }
+    { htmlFor, spanLabel, id, type, name, placeholder, onChange, value, onBlur }
 ) => (
     <label className="subs-form__labels" htmlFor={htmlFor}>
         <span>{spanLabel}</span>
@@ -12,6 +12,8 @@ const Input = (
             placeholder={placeholder}
             onChange={onChange}
             value={value}
+            onBlur={onBlur}
+            required
         />
     </label>
 )

components/formik-forms/subscribe.js → components/forms/subscribe.js

@@ -3,13 +3,24 @@ import { useFormik } from 'formik';
 import { SUBSCRIBE_ACTION } from '../../constants/path';
 import Input from '../Input';
 import Checkbox from '../Checkbox';
+import * as Yup from 'yup';
 
 const SubscribeForm = () => {
     const formik = useFormik({
         initialValues: {
             email: '',
             name: ''
-        }
+        },
+        validationSchema: Yup.object({
+            email: Yup.string()
+                .min(5, 'Too Short!')
+                .email('Invalid email address!')
+                .required('Email is required!'),
+            name: Yup.string()
+                .min(2, 'Too Short!')
+                .max(50, 'Too Long!')
+                .required('Name is required!'),
+        }),
     });
     return (
         <div className="subs-form">
@@ -28,14 +39,14 @@ const SubscribeForm = () => {
 							brief</a>:
 						an indiscriminate daily digest from our RSS feed for your reading pleasure and professional
 						development.
-					</p>
+					    </p>
 
                         <p className="subs-form__text">
                             oh! and if you let us know which of our editorial streams most floats your boat,
                             we'll also send you the occasional curated letter from one of the humans on
                             our team of editors - all of whom are far too busy
                             publishing stories to spam you in any way, we promise.
-					</p>
+					    </p>
                     </div>
 
                     <div className="subs-form__inputs">
@@ -47,8 +58,12 @@ const SubscribeForm = () => {
                             htmlFor="email"
                             spanLabel="Email Address"
                             value={formik.values.email}
+                            onBlur={formik.handleBlur}
                             onChange={formik.handleChange}
                         />
+                        {formik.touched.email && formik.errors.email ? (
+                            <div className="error-msg" style={{ marginBottom: '10px' }}>{formik.errors.email}</div>
+                        ) : null}
 
                         <Input
                             id="name"
@@ -58,8 +73,12 @@ const SubscribeForm = () => {
                             htmlFor="name"
                             spanLabel="First Name"
                             value={formik.values.name}
+                            onBlur={formik.handleBlur}
                             onChange={formik.handleChange}
                         />
+                        {formik.touched.name && formik.errors.name ? (
+                            <div className="error-msg">{formik.errors.name}</div>
+                        ) : null}
                     </div>
 
                     <div className="subs-form__checkboxes">
@@ -103,7 +122,13 @@ const SubscribeForm = () => {
                     <input type="hidden" name="list" value="OMTKMVEF3BfWHMve4EY8925g" />
                     <input type="hidden" name="subform" value="yes" />
 
-                    <button className="subs-form__btn" type="submit" name="submit" id="submit">Get great stories by email</button>
+                    <button
+                        id="submit"
+                        type="submit"
+                        name="submit"
+                        className="subs-form__btn"
+                        disabled={formik.errors.name || formik.errors.email}
+                    >Get great stories by email</button>
                 </form>
             </div>
         </div >

components/formik-forms/unsubscribe.js → components/forms/unsubscribe.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import { useFormik } from 'formik';
+import * as Yup from 'yup';
 import Input from '../Input';
 
 const UnsubscribeForm = () => {
     const formik = useFormik({
         initialValues: {
             email: ''
         },
+        validationSchema: Yup.object({
+            email: Yup.string()
+                .min(5, 'Too Short!')
+                .email('Invalid email address!')
+                .required('Email is required!')
+        }),
         onSubmit: values => {
-            console.log(values);
+            alert(JSON.stringify(values, null, 2));
         }
     });
     return (
@@ -35,8 +42,12 @@ const UnsubscribeForm = () => {
                         htmlFor="email"
                         spanLabel="Email Address"
                         value={formik.values.email}
+                        onBlur={formik.handleBlur}
                         onChange={formik.handleChange}
                     />
+                    {formik.touched.email && formik.errors.email ? (
+                        <div className="error-msg">{formik.errors.email}</div>
+                    ) : null}
                 </div>
                 <button className="subs-form__btn unsubscribe" type="submit">Unsubscribe</button>
             </form>

package.json

@@ -11,6 +11,7 @@
 		"formik": "^2.2.6",
 		"next": "10.0.8",
 		"react": "17.0.1",
-		"react-dom": "17.0.1"
+		"react-dom": "17.0.1",
+		"yup": "^0.32.9"
 	}
 }

pages/index.js

@@ -21,10 +21,6 @@ export default function Home() {
                 <Link href='/subscribe'>Subscribe page</Link>
                 <br />
                 <Link href='/unsubscribe'>Unsubscribe page</Link>
-                <br />
-                <Link href='/subscribe-formik'>Subscribe page(formik)</Link>
-                <br />
-                <Link href='/unsubscribe-formik'>Unsubscribe page(formik)</Link>
             </div>
         </>
     )

pages/subscribe/index.js

@@ -1,5 +1,5 @@
-import Subscribe from '../../components/subscribe';
+import SubscribeForm from '../../components/forms/subscribe';
 
-const subscribe = () => <Subscribe />
+const form = () => <SubscribeForm />
 
-export default subscribe;
+export default form;

pages/unsubscribe/index.js

@@ -1,5 +1,5 @@
-import Unubscribe from '../../components/unsubscribe';
+import UnsubscribeForm from '../../components/forms/unsubscribe';
 
-const unsubscribe = () => <Unubscribe />
+const unsubscribe = () => <UnsubscribeForm />
 
 export default unsubscribe;

styles/globals.css

@@ -274,6 +274,11 @@ a {
 	}
 }
 
+.error-msg {
+    margin-top: -15px;
+    color: red;
+}
+
 @media only screen and (max-width: 375px) {
 	.subs-form__inputs {
 		margin-top: 10px;