i want the page to route to another page only when validation is successful

Question

i want the page to route to another page only when validation is successful the form shows proper validation when no button route added but when i add route it doesnot . so what condnition i had to write on button click before routing.

the code is as below:

import React,{ useState } from 'react'
import { useHistory } from 'react-router-dom'

function Form() {
    const history = useHistory()
    const [firstName,setFirstName] = useState("")
    const [lastName,setLastName] = useState("")
    const [email,setEmail] = useState("")

    const [firstNameErr,setFirstNameErr] = useState({})
    const [lastNameErr,setLastNameErr] = useState({})
    const [emailErr,setEmailErr] = useState({})

    const onSubmit = (e) => {
        e.preventDefault();
        const isValid = formValidation();
    }

    const formValidation = () => {
        const firstNameErr = {};
        const lastNameErr = {}
        const emailErr = {}
        let isValid = true;

        if(firstName.trim().length < 5) {
            firstNameErr.firstNameShort = "first name is short";
            isValid = false;
        }

        if(!lastName.includes("123")) {
            lastNameErr.lastName123 = "Last name must have 123";
            isValid = false;
        }

        if(!email.includes("@")) {
            emailErr.emailerror = "email must have @ character";
        }

        setFirstNameErr(firstNameErr);
        setLastNameErr(lastNameErr);
        setEmailErr(emailErr);
        return isValid;
    }


    return (
        
            <form onSubmit={onSubmit}>
                <label> First Name: </label>
                <input type="text"
                value={firstName}
                onChange={(e)=> {setFirstName(e.target.value)}}/>
                <br/>
                {Object.keys(firstNameErr).map((key)=>{
  return <div style={{color: "red"}}>{firstNameErr[key]}</div>
                })}
                <label> Last Name: </label>
                <input type="text"
                value={lastName}
                onChange={(e)=> {setLastName(e.target.value)}}/>
                <br/>
                {Object.keys(lastNameErr).map((key)=>{
  return <div style={{color: "red"}}>{lastNameErr[key]}</div>
                })}
                <br/>
                <label> email: </label>
                <input type="email"
                value={email}
                onChange={(e)=> {setEmail(e.target.value)}}/>
                <br/>
                {Object.keys(emailErr).map((key)=>{
  return <div style={{color: "red"}}>{emailErr[key]}</div>
                })}
                <button type="submit" onClick={() => history.push('/myvehicles')}>Submit</button>

                </form>      
    )
}

export default Form

so the code is above how can route to my vehicles page with the what logic i have to add before history push?

Answer 1

No need to add click event handler.. you already have submit handler. just add validation there.

const onSubmit = (e) => {
        e.preventDefault();
        const isValid = formValidation();
        if(isValid){ // if form is valid ,route
           history.push('/myvehicles')
        }
    }