how to throw error in form validation using react

Question

In my application i created signin form with two feilds username and password.using yup library i created Validation.js file and created adminValidation - written the yup validating code in it and imported in signin page ,in that by using onsubmit i get the formData (username and password) in console using this isValid "const isValid=await adminValidation.isValid(formData);" i get boolen value but i need to get error message under the textfeild. Here my code,

Validation.js

     import * as yup from "yup";

     export const adminValidation=yup.object().shape({

         username:yup.string().required(),
         password:yup.string().min(5).max(8).required()

     })

SignIn.js

      import { adminValidation } from '../components/Validation';

     export default function SignIn() {

        const handleSubmit = async (event) => {
            event.preventDefault();
             let formData = {
                 username:event.target[0].value,
                 password:event.target[2].value  

         }
   console.log(formData);
   const isValid=await adminValidation.isValid(formData);
   console.log(isValid);

  };

  return (
    <ThemeProvider theme={theme}>
     <Container component="main" maxWidth="xs" style= 
          {{backgroundColor:'#e7e7e7',paddingBottom:'60px',boxShadow:"rgb(171 166 166) 0px 0px 
          10px 5px"}}>
    <CssBaseline />
    <Box
      sx={{
        marginTop: 8,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        
      }}
    >
      <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
        <LockOutlinedIcon />
      </Avatar>
      <Typography component="h1" variant="h5">
        Sign in
      </Typography>
      <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
        <TextField
          margin="normal"
          required
          fullWidth
          id="username"
          label="Username"
          name="username"
          autoComplete="username"
          autoFocus
        />
        <TextField
          margin="normal"
          required
          fullWidth
          name="password"
          label="Password"
          type="password"
          id="password"
          autoComplete="current-password"
        />
        <FormControlLabel
          control={<Checkbox value="remember" color="primary" />}
          label="Remember me"
        />
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={{ mt: 3, mb: 2 }}
        >
          Sign In
        </Button>
        {/* <Grid container>
          <Grid item>
            <Link to="/register">
              Don't have an account? Sign Up
            </Link>  
          </Grid>
        </Grid> */}
      </Box>
    </Box>
    
   </Container>
 </ThemeProvider>
 );
}

Answer 1

What if you do something like this:

  username:yup.string()
password: yup.string()
.min(5, 'Password must be a min of 5 character')
.max(8, 'Password must be a min of 8 or more characters')
.required('Password field is required')

This is how to write a validation using Formik and Yup:

import Link from "next/link";
import React, { useState, useContext } from "react";
import { AiOutlineCar } from "react-icons/ai";
import { BsEye, BsEyeSlash } from "react-icons/bs";
import { useRouter } from "next/router";
import { usePostLoginMutation } from "@/store/ReduxStore/fetcherApi";
import { useFormik } from "formik";
import * as Yup from "yup";

function Login() {
  const [showPassword, setShowPassword] = useState("password");
  const [postLogin] = usePostLoginMutation();
  const router = useRouter();

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },

    validationSchema: Yup.object({
      email: Yup.string()
        .max(35, "Must be a max of 15 characters")
        .min(4, "Must be a min of 4 characters")
        .required("Email is required")
        .email("Pls enter a valid email"),

      password: Yup.string()
        .max(20, "Must be a max of 15 characters")
        .min(6, "Must be a min of 4 characters")
        .required("Password is required"),
    }),

    onSubmit: async (values) => {
      await postLogin(formik.values);
      router.push("/profile");
    },
  });

  const showPasswordHandler = () => {
    if (showPassword === "password") {
      setShowPassword("text");
    } else {
      setShowPassword("password");
    }
  };


  return (
    <div >
      <div >
        
        <div >
          <p
            aria-label="Login to your account"
            
          >
            Login to your account
          </p>
          <form onSubmit={formik.handleSubmit}>
            <div className="mt-5">
              <label >
                Email
              </label>
              <input
                id="email"
                placeholder="Enter your email adress"
                type="email"
                className="authform"
                onBlur={formik.handleBlur}
                onChange={formik.handleChange}
                value={formik.values.email}
              />
              {formik.errors.email && formik.touched.email && (
                <p>{formik.errors.email}</p>
              )}
            </div>
            <div >
              <label >
                Password
              </label>
              <div className="showpasswordicon">
                <input
                  id="password"
                  placeholder="Enter your password"
                  type={showPassword}
                  className="authform"
                  onBlur={formik.handleBlur}
                  onChange={formik.handleChange}
                  value={formik.values.password}
                />
                <button
                  type="button"
                  onClick={showPasswordHandler}
                 "
                >
                  {showPassword === "password" && <BsEye />}
                  {showPassword === "text" && <BsEyeSlash />}
                </button>
              </div>
              {formik.errors.password && formik.touched.password && (
                <p className="formerror">{formik.errors.password}</p>
              )}
            </div>
            <div className="mt-8">
              <button>Login</button>
            </div>
          </form>
          <p>
            Dont have account?{" "}
            <span
            >
              <Link href="/signup">Sign up here</Link>
            </span>
          </p>
        </div>
      </div>
      </footer>
    </div>
  );
}

export default Login;