How Can I validate my password using react-hook-form

Question

I'm using react-hook-form for registration, and right now I'm stuck at validating the password and confirm password, I'm having a hard time on doing the validation, i've read some article, but it is using yup ..

I can validate the registration if I use toast but it will look bad because all of my input are using error={}

I can console.log it, but I want it to show as a message...

import React from 'react'
import { useState } from 'react'
import TuaLogo from '../../assets/tua.png'
import {useForm} from 'react-hook-form'
import { toast } from 'react-toastify'


const USER_REGEX = /^[A-z][A-z0-9-_]{3,23}$/;
const PWD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%]).{8,24}$/;
const ID_REGEX = /^[0-9]{10}$/;



const Register = () => {

  const {register, handleSubmit , formState: {errors}} = useForm()



  const onSubmit = (data) => {
    const {password, password1} = data
    
    if(password1 !== password) {
      toast.error("Password do not match")
    }

    console.log(data)
  }
  


  return (
      <Container>
        <Box 
        sx={{display:'flex',
            alignItems:'center',
            justifyContent:'center',
            width: '100%', 
            height: '100vh'}}>
          <Box sx={{display:'flex', borderRadius: '20px', alignItems:'center', justifyContent: 'center', height: '900px', width: '400px', flexDirection: 'column', padding: '20px', boxShadow: 3}}>
          <Box sx={{display: 'flex', alignItems:'center', justifyContent:'center', padding: '20px',width: '150px' }}>
                <Box component="img" sx={{width: '100%', height: '100%', objectFit: 'contain'}} src={TuaLogo}></Box>
              </Box>
              <Typography my={4} sx={{ typography: {xs: 'body1', md: 'h5'}}}>E-Benta || TUA-MARKETPLACE</Typography>
              <form onSubmit={handleSubmit(onSubmit)} style={{width: '100%', display: 'flex', flexDirection:'column', gap: '20px'}}>
                <TextField   
                    variant="outlined"
                    name="username"
                    required
                    label="Username"
                    fullWidth
                    autoComplete='username'
                    autoFocus
                    {...register('username', {required: "Required", pattern: {value: USER_REGEX, message: "Username should be 3-16 characters and shouldn't include any special character!" }})}
                    error={!!errors?.username}
                    helperText={errors?.username ?errors.username.message: null}

                />
                <TextField   
                    variant="outlined"
                    name="email"
                    label="Email"
                    required
                    fullWidth
                    type="email"
                    autoComplete='email'
                    autoFocus
                    {...register('email', {required: "Required", pattern: { message: "It should be a valid email address!" }})}
                    error={!!errors?.email}
                    helperText={errors?.email ?errors.email.message: null}
                />
                <TextField   
                    variant="outlined"
                    name="studentid"
                    label="Student ID"
                    required
                    fullWidth
                    type="text"
                    autoComplete='text'
                    autoFocus
                    {...register('studentid', {required: "Required", pattern: {value: ID_REGEX,  message: "Please Enter your Student ID properly" }})}
                    error={!!errors?.studentid}
                    helperText={errors?.studentid ? errors.studentid.message: null}
                />

                <TextField   
                    variant="outlined"
                    name="password"
                    label="Password"
                    required
                    fullWidth
                    type="password"
                    autoComplete='password'
                    autoFocus
                    {...register('password', {required: "Required", pattern: {value: PWD_REGEX,  message: "Password should be 8-24 characters and include at least 1 letter, 1 number and 1 special character!" }})}
                    error={!!errors?.password}
                    helperText={errors?.password ? errors.password.message: null}
                />

                <TextField   
                    variant="outlined"
                    name="password1"
                    label="Confirm Password"
                    required 
                    fullWidth 
                    type="password"
                    autoComplete='password'
                    autoFocus
                      {...register('password1', {required: "Required", pattern: {
                      validate: (state) => {
                        if(state !== watch('password')){
                          console.log("Password mismatch")
                      }}}, message: "Password does not match"}
                      
                      )}                         error={!!errors?.password1}
                    helperText={errors?.password1 ? errors.password1.message: null}
                />


                <Button type="submit" variant="contained">Register</Button>
              </form>

          </Box>
        </Box>
      </Container>
  )
}

export default Register

Answer 1

Validate in <TextField> of password1 should be

<TextField   
  variant="outlined"
  name="password1"
  label="Confirm Password"
  required 
  fullWidth 
  type="password"
  autoComplete='password'
  autoFocus
  {...register('password1', {
    required: "Required",
    validate: (value) => {
      return value === watch('password') || 'Password does not match'
    }
  })}                   
  error={!!errors?.password1}
  helperText={errors?.password1 ? errors.password1.message: null}
/>

More example: https://react-hook-form.com/api/useform/register