I have been implementing a form using ReactJS and came across a problem and not able to find the solution to this:

->I have created a form using ReactJS and on submitting it I have successfully added the validation to the input values, but when I'm adding the router to it for redirecting to the other page the validation is not working and it is getting redirected instead of validating. So I have checked through the solutions for using multiple function for onSubmit the form so to perform the validation and then my routing but nothing is working out.

->Here below I have my code can anyone help me with the working of both validation and then redirect after validating the input fields one after the other on submitting the form.

CODE:

import React, { useState, useEffect } from 'react';
import {  NavLink, useNavigate } from 'react-router-dom';


function Password () {
    
    const initialvalues = {password:""}
    const [formValues, setFormValues] = useState(initialvalues);
    const [formErrors, setFormErrors] = useState({});
    const [isSubmit, setIsSubmit] = useState(false);

    const handleChange = (e) =>{
        const{name,value} = e.target;
        setFormValues({...formValues, [name]:value});
    }

    let navigate = useNavigate();

    const handleSubmit = (e) =>{
        e.preventDefault();
        setFormErrors(validate(formValues));
        setIsSubmit(true);
        navigate('afterlogin');
    }

    useEffect(()=>{
        console.log(formErrors);
        if(Object.keys(formErrors).length ===0 && isSubmit){
            console.log(formValues);
        }
    },[formErrors])

    const validate = (values) =>{
        const errors = {}
        
        const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_= -]).{4,12}$/;
        

        if(!values.password){
            errors.password = "Password is required";
        }else if(!regexp.test(values.password)){
            errors.password = "passsword must contain atleast one uppercase,lowercase,number,special character";
        }
        else if(values.password.length < 4){
            errors.password = "Password must me more than 4 characters";
        }else if (values.password.length > 6){
            errors.password = "Password cannot be more than 6 characters";
        }
        return errors;
    };
    
        return (
            <div>
               
               <form onSubmit={handleSubmit} >
                   
                    <div>
                        <input type="password" name='password' placeholder='Password'
                                value={formValues.password}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                         />
                    <p style={{color:"red"}}>{formErrors.password}</p>
                        <button className='btn-primary' 
                                    style={{width:"210px",height:"30px",fontSize:"15px",
                                            marginLeft:"10px",
                                            backgroundColor:"skyblue"
                                            }}>
                                            Login</button>
                    </div>
                 </form>
                </div>
        )
    }

export default Password;

->This is my code if anyone is clear with the problem I'm facing please help me to solve this.

   **Thanks in advance**

CodePudding user response：

You need to check condition that validation is passed or not if every field is valid then set submit to true and navigate Try this

const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validate(formValues)
    if (Object.keys(errors).length) {
        setFormErrors(errors);
    }
    else {
        setIsSubmit(true);
        navigate('afterlogin');
    }

}

CodePudding user response：

handleSubmit is synchronous and unconditionally navigates to "afterlogin" every time the submit handler runs. If I understand your question correctly it seems like you should validate the form and only navigate if there are no errors.

Check the validation errors key length in the submit handler and if there are any errors update the appropriate state, otherwise issue the imperative navigation.

const handleSubmit = (e) =>{
  e.preventDefault();
  const errors = validate(formValues);

  if (Object.keys(errors).length) {
    setFormErrors(errors);
  } else {
    navigate('afterlogin');
  }
}