React Hook Form OnSubmit Handler and Validation

1
votes

I have a react hook form setup to validate using yup and that works perfectly okay. When I click a Continue button it validates fields and shows error messages against them. However, I'm unsure how it is supposed to work when all validation fields have been entered correctly. As far as I can see the function specified in handleSubmit(someFunc) is called if all validation is complete. In my scenario it has been instigated by an RRLink as below...so Continue button clicked, assume everything is valid, it then hits onSubmit() function, what about the RRLink with the toPath...that navigation to another page seems to be lost now...How do I make it so it picks up the RRLink navigate to another page when valid?

const onSubmit = (data) => {
    console.log("SUBMIT:" + data);   
};

<RRLink onClick={handleSubmit(onSubmit)} to={{ pathname: `/${summaryPath}` }} tabIndex="-1" className="mp-react-router-link">
    <Button type="submit" >
        Continue
    </Button>
</RRLink>
2
reactjsreact-hook-form
So I'm guessing RRLink means Link in React Router lib? If so, you can replace it with a simple form component with an onSubmit handler pointing to "handleSubmit(onSubmit)" as you just did, and then calling history.push("/${summaryPath}") from there. When form is in a valid state, it'll be executed ;) - Josnei Luis Olszewski Junior

2 Answers

0
votes

You can go with something like:

import { useHistory } from "react-router-dom";

const history = useHistory();

const onSubmit = (data) => {
    history.push(`/${summaryPath}`);
};

<form onSubmit={handleSubmit(onSubmit)} tabIndex="-1" className="mp-react-router-link">
    {/* form content goes here */}

    <Button type="submit" >
        Continue
    </Button>
</form>
0
votes

useHistory The useHistory hook gives you access to the history instance that you may use to navigate.

import { useHistory } from "react-router-dom";

let history = useHistory();

const onSubmit = (data) => {
   history.push(`/${summaryPath}`);
};