reactjs - Getting error when validate confirm Password in react

Question

Am trying to confirm if password field and confirm password field is match but it giving me error that I specify for confirm password in react even when the characters is longer than 8 characters please help me to look into it. Thanks This is the validation for password and confirm password

    const [data, setData] = useState({
    firstname: "",
    lastname: "",
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
    agree: false,
    error: false,
    loading: false,
    success: false,
  });



 const alert = (msg, type) => (
    <div className={`text-sm text-${type}-500`}>{msg}</div>
  );



const formSubmit = async (event) => {
    event.preventDefault();
    setData({ ...data, loading: true });
    if (
      !data.firstname ||
      typeof data.firstname != "string" ||
      data.firstname.length < 3 ||
      !/^[a-zA-Z]{3,}$/.test(data.firstname)
    ) {
      return setData({
        ...data,
        error: { firstname: "first name is required" },
      });
    } 

else if (
      !data.lastname ||
      typeof data.lastname != "string" ||
      data.lastname.length < 3 ||
      !/^[a-zA-Z]{3,}$/.test(data.lastname)
    ) {
      return setData({
        ...data,
        error: { lastname: "first name is required" },
      });
    }



else if (!data.email) {
      return setData({
        ...data,
        error: { email: "Please provide valid email address" },
      });
    } else if (
      !data.username ||
      typeof data.username != "string" ||
      data.username.length < 3 ||
      !/^[a-zA-Z0-9]{3,}$/.test(data.username)
    ) {
      return setData({
        ...data,
        error: { username: "Please provide username" },
      });
    } else if (
      !data.password ||
      typeof data.password != "string" ||
      data.password.length < 8
    ) {
      return setData({
        ...data,
        error: {
          password: "Please Password must be at least eight character long",
        },
      });
    } else if (
      !data.confirmPassword ||
      typeof data.confirmPassword != "string" ||
      data.confirmPassword.length < 8
    ) {
      return setData({
        ...data,
        error: {
          confirmPassword:
            "Confirm Password must be at least eight character long",
        },
      });
    } else if (data.confirmPassword !== data.password) {
      return setData({
        ...data,
        error: {
          confirmPassword: "Confirm Password doesn't match with password",
          password: "Password doesn't match",
        },
      });
    } else if (!data.agree) {
      return setData({
        ...data,
        error: { agree: "Please accept terms and condition" },
      });
    }

And this is the password and confirm password field

      <FormGroup row>
        <Label htmlFor="password" md={2}>
          Password
        </Label>
        <Col md={10}>
          <Input
            onChange={(e) =>
              setData({
                ...data,
                success: false,
                error: {},
                password: e.target.value,
              })
            }
            value={data.password}
            type="password"
            id="password"
            name="password"
            className={`${
              data.error.password ? "border-red-500" : ""
            } px-4 py-2 focus:outline-none border`}
          />
          {!data.error ? "" : alert(data.error.password, "red")}
        </Col>
      </FormGroup>
      <FormGroup>
        <Label htmlFor="confirmpassword" md={2}>
          Confirm Password
        </Label>
        <Col md={10}>
          <Input
            onChange={(e) =>
              setData({
                ...data,
                success: false,
                error: {},
                confirmpassword: e.target.value,
              })
            }
            value={data.confirmpassword}
            type="password"
            id="confirmpassword"
            name="confirmpassword"
            className={`${
              data.error.confirmpassword ? "border-red-500" : ""
            } px-4 py-2 focus:outline-none border`}
          />
          {!data.error ? "" : alert(data.error.confirmPassword, "red")}
        </Col>
      </FormGroup>

Answer 1

等待大神答复