Как провалидировать форму с 100 полями?

Question

[Im p3l]

Есть форма с 100 полями на react-hook-form и yup. Как можно просто провалидировать все поля и не писать валидацию на каждое поле в формате:

const schema = yup.object().shape({
    1: yup.string().required("Required"),
    2: yup.string().required("Required"),
    3: yup.string().required("Required"),
    ...,
    99: yup.string().required("Required"),
    100: yup.string().required("Required"),
})

Comments

[Андрей Семейкин]

а циклы для кого? одинаковые же строчки

Answer 1

[Im p3l]

Сделал костыльное решение

const validation = () => {
  const arr = []
  const obj = {}
  arr.push(yup.string().optional())
  for (let i = 1; i < 100; i++) {
    arr.push(obj[i] = yup.string().required('Нужен ответ на вопрос'))
  }
  return arr
}

const schema = yup.object().shape({
  ...validation()
})

Answer 2

[Илья]

Нужно сделать реюзабельный компонент, в котором будут прописаны правила валидации. Пропанами можно туда передавать значения, по типу минимальной длины или текста для ошибки. Сам этот компонент принимает в себя children, который будет твоими импутами. И тут уже не важно 10 их или 100, сработает.

Я перестал юзать Formik и перешёл на react-hook-form. Он и удобнее, и весит меньше, написан без зависимостей, и не делает рендер на вводе каждого символа. Советую глянуть. Но с реюзабельным худом сработает что угодно.