0

Я пытаюсь добиться в своей схеме не совсем валидации, но сообщения для пользователя. Под полем input. У моей схемы есть следующие параметры:

  const validationSchema = Yup.object().shape({
    title: Yup.string()
      .required("Поле обязательно для заполнения")
      .max(50, "Заголовок не более 50 символов"),
  });

При этом в самом компоненте я получаю кол-во введенных символов:

{...register("title", {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value.length);
  }
})}

Моя задача выводить кол-во оставшихся символов под input пока пользователь не введет >=50 символов. При этом строго к валидации это не относится, т.к. это просто информативное поле. Могу ли я каким-то образом рассчитывать это значение в Yup? Буду благодарен вашим советам. Так как довольно сложно начинать с этой библиотекой!

1 ответ 1

0

Я не сильно уверен, это ли вам нужно, но вы можете прописать кастомный валидатор:

function validateUsername(value) {
   let error;
   if (value === 'admin') {
     error = 'Nice try!';
   }
   return error;
 }

<Field name="username" validate={validateUsername} />

У вас полагаю это будет выглядеть как то так:

const someValidation = (value) => {
   let error

   if (value.length < 50) {
     error = `Осталось ${50 - value.length} символов`
   }

   return error
 }

<Field validate={someValidation} />
3
  • пользуясь инструментом валидации не хочется чего-то еще накручивать кастомного. К тому же это непосредственно к валидации относится
    – elarri
    16 ноя 2022 в 7:34
  • @elarri тогда я бы на вашем месте попробовал прокинуть колбэк в max, например .max((value) => console.log(value)), но это все догадка, с либой я плохо знаком, вскользь приходилось года 3 назад задеть, если таким образом получится, то можете применить валидатор, что я добавил выше.
    – MrYogurt
    16 ноя 2022 в 12:54
  • валидатор для валидности, сдесь скорее useWatch() ну и span с текстом )
    – Armen
    21 ноя 2022 в 14:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.