Search code examples
reactjsmaterial-uinext.jsreact-forms

check two TextField have the same value with react-hook-form


i have a form that i want check if the value of two input are the same, my form is this:

function FormDatosIcfes(){
            
    const classes = useStyles();  
    const {register, handleSubmit, control, errors} = useForm();
        return (
            <Box>
                <center>Formulario Datos del ICFES</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="documentoIcfes"
                    label="Documento presentado en el ICFES"
                    name="documentoIcfes"
                    autoComplete="number"
                    autoFocus
                    /> 
                    {errors.documentoIcfes && <span className={classes.errores}>Este campo es obligatorio</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.errores}>Este campo es obligatorio</span>}
                    <TextField
                    variant="outlined"
                    margin="normal"
                    inputRef={register({ validate: value => value === **HERE snpIcfes VALUE** || 'error message' })}
                    required
                    fullWidth
                    id="snpIcfesConfirmacion"
                    label="Confirmación SNP ICFES"
                    name="snpIcfesConfirmacion"
                    autoComplete="text"                    
                    />   
                    {errors.snpIcfesConfirmacion && <span className={classes.errores}>Este campo debe ser igual al SNP ICFES</span>}                 
                    
                    
                    <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    >
                    Guardar
                    </Button>
                </form>
            </Box>
            );
}

And the inputs are snpIcfes and snpIcfesConfirmacion, how i can check it with register validate? i am using https://material-ui.com/es/api/text-field/ and react-hook-form


Solution

  • yo can use getValues("id-input") like this:

    inputRef={register({ validate: value => value === getValues("snpIcfes") || ' - debe ser igual al SNP ICFES' })}
    

    check the documentation: https://react-hook-form.com/api#getValues