Валидация сложных форм React. Часть 1

[@almirus]

Клиентская валидация хорошо работает в JSON Schema — Forms
github.com/mozilla-services/react-jsonschema-form

[@kalaev-viktor]

Это только первая часть, в следующих статьях я напишу примеры которые мне кажутся очень удобными и понятными при разработки

[@mrTyler]

Чем вам Formik + Yup не угодил? В вашем кейсе не вижу решения для стилизации и кастомизации. Например мне нужно React-Select упаковать в вашу форму, как мне это сделать?

Форма логина на связке Formik + Yup выглядит куда более читаемой

import React from 'react';
import { View, Dimensions } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { TextInput, Button } from '../components';

const validationSchema = Yup.object().shape({
  username: Yup.string()
    .min(4, 'Too Short!')
    .max(24, 'Too Long!')
    .required('Required'),
  password: Yup.string()
    .min(6, 'Too short password')
    .max(30, 'Too long')
    .required('Required'),
  securityCode: Yup.number()
    .min(99999, 'Too Short!')
    .max(999999, 'Too Long!')
    .required('Required'),
});
const { width } = Dimensions.get('window');

const LoginForm = componentProps => (
  <Formik
    validationSchema={validationSchema}
    initialValues={componentProps.initialValues}
    onSubmit={componentProps.onSubmit}
    validateOnChange={false}
    validateOnBlur={false}
  >
    {props => (
      <View style={{ width, padding: 10 }}>
        <TextInput
          placeholder="Username"
          returnKeyType="done"
          onChangeText={props.handleChange('username')}
          error={props.errors.username}
          onBlue={props.handleBlur('username')}
          value={props.values.username}
        />
        <TextInput
          secureTextEntry
          placeholder="Password"
          returnKeyType="done"
          onChangeText={props.handleChange('password')}
          error={props.errors.password}
          onBlue={props.handleBlur('password')}
          value={props.values.password}
        />
        <TextInput
          error={props.errors.securityCode}
          keyboardType="number-pad"
          returnKeyType="done"
          placeholder="Google Authentication code"
          onChangeText={props.handleChange('securityCode')}
          onBlue={props.handleBlur('securityCode')}
          value={props.values.securityCode}
        />
        <Button
          secondary
          rounded
          style={{ alignSelf: 'stretch', marginTop: 35 }}
          caption="Login"
          onPress={props.handleSubmit}
        />
      </View>
    )}
  </Formik>
);

export default LoginForm;

[@kalaev-viktor]

Если забегая немного вперёд, то можно описать
<InputBlock name="name" />

И в этом компоненте мы уже и описываем всю конструкцию, label, само поле и выводим ошибки

[@kalaev-viktor]

Здесь описаны пока простейшие случае, ответ будет в следующей статье.

[@mrTyler]

Вот это выглядит минимум странно, я уже молчу о том, что у вас чекбокс хранит внутри себя состояние checked, что в целом он делать не должен, а если должен, то должен выполнять проверку на изменения.

<InputCheckbox name="remember" value="yes" />

Допустим я выбрал опцию, которая должна задизаблить или отчекнуть чекбокс, ваш чекбокс на это действие не отреагирует.

Ваш код не проходил код ревью, советую сделать, а также докинуть eslint и, ставший уже стандартным, пакет гайдов от всем известной компании.

[@kalaev-viktor]

Вопрос как программным способом снять checked, я учту это замечание, большое спасибо.

[@Gho_st]

www.npmjs.com/package/react-validation-boo
Зачем эта копипаста в описание пакета? Где нормальная документация? Где ссылка на github репозиторий?

Я так понял это ваша велосипед библиотека. Гораздо интересней вместо примера реализации прочитать какие у нее преимущество перед существующими решениями, и что побудило на создание еще одного. Например есть замечательный Final-Form с кучей примеров и отличной документацией

[@kalaev-viktor]

Чтобы описать отличия, надо сперва описать принцип работы. Это копипаст, потому что я пишу доку и сразу её публикую на github. Да много решений, я не первый, я предлагаю своё виденье, а вам решать что использовать.

[@dagen]

для валидации форм любой сложности.

Смело. А как же проблема зависимых друг от друга полей? А как же асинхронные сценарии? Кстати, свой DSL (я про «сценарии») — это очень неудобное решение, в современном приложении и так куча DSL.

А как же тот факт, что в случае сложных форм проще вынести валидацию в, например, саги, а обёртки компонентов будут просто уметь рисовать ошибки.

Про код-стайл уже сказали выше, но имена классов с маленькой буквы — это за гранью добра и зла.
А где можно глянуть исходники, не устанавливая пакет?

[@irsick]

А ещё есть валидация динамических инпутов или групп инпутов. Пример — "Предыдущие места работы".

[@Druu]

1. Где обработка dirty/touched?
2. Правильно я понимаю, что нельзя определить тип ошибок в форме?
3. Почему код, отвечающий за валидацию, отвечает еще и за рендер ошибок? Смесь логики и отображения в худшей ее форме.
4. Сценарии = привет часам отладки.
5. Непонятно, как это должно работать с динамическими формами
6. Как будет выглядеть совместная валидация? Например — то, что повтор пароля совпадает с паролем.

[@Mizhgunich]

Мне куда более интересней, как валидировать табличную форму, где помимо допустим имени и фамилии есть поля, которые могут добавляться и удаляться.
Как валидировать составную форму. Когда есть одна страница и там несколько форм подключается, есть табличные, форма разбита на страницы, а кнопка сохранить одна в конце.

[@kalaev-viktor]

В примере я добавил поле {this.getCommentContent()}, не кто не мешает добавить 10 полей или убрать их