Multiple password checks validation Yup and RHF?

Question

[Alexander]

Здравствуйте, кто знает как добавить несколько проверок валидации пароля с помощью react hook form и yup?


Как получить все ошибки поля password до их инициализации чтобы отобразить в ui и делать текст активным когда их нету, как показано на скриншоте. Буду очень благодарен за помощь, уже 2 день с этим разбираюсь

Comments

[Александр]

https://github.com/knicola/yup-password

Answer 1

[Валерий]

https://codesandbox.io/s/busy-feather-06hmm?file=/...
Как лучше ренедерить ошибки, думаю разберешься сам. В моем случае у меня в errors лежит массив кодов ошибок.

Comments

[Alexander]

а как сделать чтобы ошибки не пропадали после корректного ввода? Мне нужно как-то им добавить активные стили

[Валерий]

Ну ты можешь проверять, что если ошибки нет в массиве, то добавить активный класс. В начале рендерить все "ошибки" в неактивном состоянии

[Alexander]

тут не совсем понял, я создал два useState, один для статики а другой для динамики, но не понимаю как мне их сравнить чтобы добавить активный класс?

const [errors, setErrors] = React.useState([]);
  const [initErrors, setInitErrors] = React.useState([]);
  const [password, setPassword] = React.useState("");

  useEffect(() => {
    async function validate(password) {
      try {
        const result = await passwordSchema.validate(
          {
            password
          },
          { abortEarly: false }
        );

        if (!!result) {
          setErrors([]);
        }
      } catch (e) {
        setErrors(e.errors);
      }
    }
    validate(password);
  }, [password]);

  useEffect(() => {
    async function validate(password) {
      try {
        const result = await passwordSchema.validate(
          {
            password
          },
          { abortEarly: false }
        );

        if (!!result) {
          setErrors([]);
        }
      } catch (e) {
        setInitErrors(e.errors);
      }
    }
    validate(password);
  }, []);

[Валерий]

Ну смотри, у тебя в initErrors должны лежать все коды ошибок(required, min...), ты их рендеришь все сначала в статусе(класс) неактивном, потом, когда пользователь набирает текст, ты проверяешь для каждой initError, что в массив errors.includes(initError). Если нет - меняешь стиль этой ошибки в активный

[Alexander]

Валерий, спасибо большое