Валидация React компонентов с помощью Livr.js

[argonavtt]

Вы </Error не закрыли в последнем примере

[one_more]

поправил

[Holms]

как это будет работать с react-form? есть примеры?

[turbo_exe]

ваша концепция LIVIR очень похожа на то, что я хотел от валидации на JS с год назад. я ничего стоящего не нашёл тогда и в итоге написал свой велосипед который очень похож на ваш, но работает только на js и обладает (пока) меньшим функционалом.

вопрос: можно ли в LIVIR сделать так чтобы поле валидировалось только при определённых условиях? например, валидировать email только если пользователь подписался на рассылку. в моём велосипеде это делается как-то так:

const {
  validate,
  util: { when },
  rules: { isBoolean, isEmail }
} = require('yeval');

const optedInForNewsletter = (value, data) => data.optedInForNewsletter === true;

validate(
  // declare rules as first argument
  {
    optedInForNewsletter: isBoolean,
    email: when(optedInForNewsletter, isEmail),
  },
  // pass data as second argument
  { optedInForNewsletter: true }
)
  .then(errors => {
    console.log(errors); // { email: 'Must be a valid email address' }
  });

[koorchik]

У нас в проектах мы сделали правило required_if

И пишем так:

{    
    optedInForNewsletter: {one_of: [1, 0]},
    email:  [{required_if: 'optedInForNewsletter'}, 'email'],
}

[one_more]

Как вариант можно еще динамически менять правила валидации, если правил много и применять надо только при условии.

import React, {Component} from 'react';
import Validation, {DisabledOnErrors, ValidationInput} from 'react-livr-validation';

const data = {
    login: '',
    email: ''
};

class App extends Component {
    state = {
        withEmail: false
    };

    toggleWithEmail = ({target: {checked}}) => {
        this.setState({
            withEmail: checked
        })
    };

    render() {
        const {withEmail} = this.state;
        const schema = {
            login: ['required', 'not_empty'],
            email: withEmail ? ['required', 'not_empty', 'email'] : []
        };
        return (
            <div>
                <Validation
                    data={data}
                    schema={schema}
                >
                    <form>
                        <ValidationInput name="login">
                            <input name="login"/>
                        </ValidationInput>
                        <ValidationInput name="email">
                            <input name="email" type="email"/>
                        </ValidationInput>
                        <div>
                            <label htmlFor="subscribe">subscribe</label>
                            <input
                                id="subscribe"
                                type="checkbox"
                                onChange={this.toggleWithEmail}
                            />
                        </div>
                        <DisabledOnErrors>
                            <input type="submit"/>
                        </DisabledOnErrors>
                    </form>
                </Validation>
            </div>
        );
    }
}

[koorchik]

Возможно будет тоже полезно. Для JavaScript, кроме основных правил, есть отдельный пакет с дополнительными правилами — https://www.npmjs.com/package/livr-extra-rules и он тоже zero dependencies :)