feat: form validation

src/components/signupforms/SignupForm.tsx

@@ -10,7 +10,7 @@ import StepOne from '../steps/StepOne';
 
 export interface StepProps {
     submitButtonText: string;
-    prevButton?: ()=>void;
+    prevButton: boolean;
     nextButton?:()=> void;
 }
 
@@ -35,7 +35,7 @@ const SignupForm = ({submitButtonText, prevButton, nextButton}:StepProps) => {
                     <div className={formStage === 3 ? "progress-step progress-step-active" : "progress-step"}></div>
                 </div>
                 {/* <Switcher onChange={onChange} state={state} /> */}
-                {(formStage === 1) && <StepOne submitButtonText={submitButtonText} prevButton={prevButton}/>}
+                {(formStage === 1) && <StepOne submitButtonText={submitButtonText} prevButton={false} />}
                 {(formStage === 2) && <div>wteye</div>}
                 {(formStage === 3) && <div>kdkd</div>}
             </div>

src/components/steps/StepOne.tsx

@@ -1,23 +1,23 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import classes from '../../../styles/index.module.css'
 import { useDispatch, useSelector } from 'react-redux';
 import { StepProps } from '../signupforms/SignupForm';
-// import { nextStep } from '../../redux/slices/steps';
 import { RootState } from '../../redux/store';
+import { formSignup, formStage } from '../../redux/slices/steps';
 
 
 
-const StepOne = ({ submitButtonText }: StepProps) => {
-    
+const StepOne = ({ submitButtonText, prevButton }: StepProps) => {
+
     const dispatch = useDispatch();
 
     //grab state values from redux Steptype slice
-    const currentStage = useSelector((state: RootState) => state.stepState.FormStage);
+    const currentStage = useSelector((state: RootState) => state.stepState.FormStage); //count
     const formFirstName = useSelector((state: RootState) => state.stepState.FormSignup.fname);
     const formLastName = useSelector((state: RootState) => state.stepState.FormSignup.lname);
     const formEmail = useSelector((state: RootState) => state.stepState.FormSignup.email);
     const formDOB = useSelector((state: RootState) => state.stepState.FormSignup.dob);
-    const formPassword = useSelector((state: RootState)=> state.stepState.FormSignup.password)
+    const formPassword = useSelector((state: RootState) => state.stepState.FormSignup.password)
 
     //form initial state value
     const [formData, setFormData] = useState({
@@ -30,63 +30,109 @@ const StepOne = ({ submitButtonText }: StepProps) => {
 
     //form values onChange
     const handleChange = (e: any) => {
-            setFormData({
-                ...formData,
-                [e.target.name]: e.target.value
-            })
+        setFormData({
+            ...formData,
+            [e.target.name]: e.target.value
+        })
+    }
+    const [errors, setErrors] = useState({});
+    const validate = (formData: any) => {
+        let formErrors = {} //empty on first request;
+        //fname
+        if (!formData.fname) {
+            formErrors.fname = "first name required"
+        }
+        //last name
+        if (!formData.lname) {
+            formErrors.lname = "last name required"
+        }
+        //email
+        const emailRegex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
+        if (!formData.email || !emailRegex.test(formData.email)) {
+            formErrors.email = "valid email is required"
+        }
+        //password
+        const passwordRegex = new RegExp('(?=.*[a-z])+(?=.*[A-Z])+(?=.*[0-9])+(?=.{10,})')
+        if (!formData.password || !passwordRegex.test(formData.password) ) {
+            formErrors.password = "The minimum password length is 10 characters and must contain at least 1 lowercase letter, 1 uppercase letter and 1 number"
+        }
+        return formErrors
     }
 
+    const [isSubmitted, setIsSubmitted] = useState(false)
+
     const submitFormData = (e: any) => {
         e.preventDefault()
+        setErrors(validate(formData)) //check for errors
+        setIsSubmitted(true)//update submit status
         // dispatch(nextStep())
     }
 
+    useEffect(() => {
+        if (Object.keys(errors).length ===0 && isSubmitted) {
+            dispatch(formStage(2))
+        }
+        dispatch(
+            formSignup({
+                fname: formData.fname,
+                lname: formData.lname,
+                email: formData.email,
+                dob: formData.dob,
+                password: formData.password,
+            })
+        )
+    }, [formData,isSubmitted, errors, dispatch])
+
     return (
         <form onSubmit={submitFormData}>
             <div className={classes.formLayout}>
                 <div>
                     <p>First Name</p>
-                    <input type="text" onChange={onChange} />
+                    <input type="text" name="fname" value={formData.fname} onChange={handleChange} />
+                    {errors.fname && <span className={classes.errorHandler}>{ errors.fname}</span>}
                 </div>
 
                 <div>
                     <p>Last Name</p>
-                    <input type="text" onChange={onChange} />
+                    <input type="text" name="lname" value={formData.lname} onChange={handleChange}/>
+                    {errors.lname && <span className={classes.errorHandler}>{ errors.lname}</span>}
                 </div>
             </div>
 
             <div className={classes.formLayout}>
                 <div>
                     <p>Email</p>
-                    <input type="email" onChange={onChange} />
+                    <input name="email" value={formData.email} onChange={handleChange} />
+                    {errors.email && <span className={classes.errorHandler}>{ errors.email}</span>}
                 </div>
 
                 <div>
-                    <p>Date Of Birth</p>
-                    <input type="date" onChange={onChange} className={classes.date} />
-                    {/* <DateSection/> */}
-                </div>
-            </div>
-
-            <div className={classes.formLayout}>
-                <div className={classes.address}>
-                    <p>Address</p>
-                    <input type="email" onChange={onChange} />
+                    <p>Password</p>
+                    <input type="password" name="password" className={classes.password} value={formData.password} onChange={handleChange} />
+                    {errors.password && <span className={classes.errorHandler}>{ errors.password}</span>}
                 </div>
             </div>
 
             <div className={classes.formBtn}>
-                <button>next</button>
+                {(prevButton) &&
+                    <p>
+                        <input
+                            className={classes.btn}
+                            type="submit"
+                            value={`Back`}
+                            onClick={()=> dispatch(formStage(currentStage - 1))}
+                        />
+                    </p>
+                }
+                <p>
+                    <input
+                        className={classes.btn}
+                        type="submit"
+                        value={submitButtonText || 'submit'}
+                    />
+                </p>
             </div>
         </form>
     )
 }
-//   firstName: '',
-//         lastName: '',
-//         DOB: '',
-//         email: '',
-//         telephone: '',
-//         file: '',
-//         message: '',
-//         agreedToTerms: true,
 export default StepOne

src/redux/slices/steps/index.ts

@@ -29,6 +29,6 @@ const stepSlice = createSlice({
     }
 })
 
-export const { formStage, ormSignup, FormPrivacy } = stepSlice.actions;
+export const { formStage, formSignup, formPrivacy } = stepSlice.actions;
 export const selectAllSteps = (state: RootState) => state.stepState
 export default stepSlice.reducer

styles/index.module.css

@@ -90,7 +90,7 @@
     text-align: center;
 }
 
-.formBtn>button {
+.btn {
     background: #212122;
     border: 1px solid rgba(245, 245, 245, 0.493);
     padding: 10px 30px;
@@ -127,4 +127,13 @@
     border-bottom: 1px solid rgb(227, 199, 199);
     width: 105%;
     border-radius: 25px;
+}
+
+.errorHandler {
+    color: #fff;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    width:100%;
+    margin-top:3px;
 }