I have created a form in which I need to validate if the values of two input fields are the same. The structure of my form is as follows:
function FormDataIcfes(){
const classes = useStyles();
const {register, handleSubmit, control, errors} = useForm();
return (
<Box>
<center>ICFES Data Form</center>
<hr/>
<form noValidate onSubmit={handleSubmit((data)=> console.log(JSON.stringify(data)))}>
<TextField
variant="outlined"
margin="normal"
inputRef={register({ required: true })}
required
fullWidth
type="number"
id="icfesDocument"
label="ICFES Document Presented"
name="icfesDocument"
autoComplete="number"
autoFocus
/>
{errors.icfesDocument && <span className={classes.errors}>This field is required</span>}
<TextField
variant="outlined"
margin="normal"
inputRef={register({ required: true })}
required
fullWidth
id="snpIcfes"
label="SNP ICFES"
name="snpIcfes"
autoComplete="text"
/>
{errors.snpIcfes && <span className={classes.errors}>This field is required</span>}
<TextField
variant="outlined"
margin="normal"
inputRef={register({ validate: value => value === **HERE snpIcfes VALUE** || 'error message' })}
required
fullWidth
id="snpIcfesConfirmation"
label="SNP ICFES Confirmation"
name="snpIcfesConfirmation"
autoComplete="text"
/>
{errors.snpIcfesConfirmation && <span className={classes.errors}>This field must match the SNP ICFES</span>}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Save
</Button>
</form>
</Box>
);
}
The input fields we are comparing are named snpIcfes and snpIcfesConfirmation. How can I perform this validation using the register keyword? I am using Material-UI's TextField component along with react-hook-form.