validation component for react with LIVR as validation engine
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
app
dist
.babelrc
.eslintrc.js
.flowconfig
.gitignore
.npmignore
README.md
package.json
webpack.config.js

README.md

React validation component

installation

npm i -S react-livr-validation

live demo

usage

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

const schema = {
    login: ['required', 'not_empty'],
    password: ['required', 'not_empty']
};

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

export default function() {
    return (
        <Validation
            data={data}
            schema={schema}
        >
            <form>
                <ValidationInput name="login" >
                    <input name="login" />
                </ValidationInput>
                <ValidationInput name="password" >
                    <input name="password" type="password" />
                </ValidationInput>
                <DisabledOnErrors>
                    <input type="submit" />
                </DisabledOnErrors>
            </form>
        </Validation>
    );   
}

custom rules

const customRules = {
    alpha_chars: function() {
        return function(value) {
            if (typeof value === 'string') {
                if (!/[a-z,A-Z]+/.test(value)) {
                    return 'WRONG_FORMAT';
                }
            }
        };
    }
};
const aliasedRules = [
    {
        name: 'strong_password',
        rules: { min_length: 6 },
        error: 'TOO_SHORT'
    }
];
const schema = {
    login: ['required', 'not_empty'],
    password: ['alpha_chars', 'strong_password']
}
const data = {
    login: '',
    password: ''
}
export default function() {
    return (
        <Validation
            data={data}
            schema={schema}
            rules={customRules}
            aliasedRules={aliasedRules}
        >
            // ... form
        </Validation>
    );   
}

styled error block

export default function() {
    return (
        <Validation
            data={data}
            schema={schema}
            style={{
                color: 'maroon',
                fontWeight: 'bold'
            }}
            className="custom CN"
        >
            // ... form
        </Validation>
    );   
}

pass error codes dictionary

const errorCodes = {
    TOO_SHORT: 'password is too short'
}
export default function() {
    return (
        <Validation
            data={data}
            schema={schema}
            errorCodes={errorCodes}
        >
            // ... form
        </Validation>
    );   
}

russian dictionary

default locale is english but you can import russian dictionary from package

import {RU_ERROR_CODES} from 'react-livr-validation'

write your own validation component

// @flow

import React, {Component} from 'react'
import {ValidationComponent} from 'react-livr-validation'
import get from 'lodash/get'
import noop from 'lodash/noop'
import compose from 'ramda/src/compose'
import styled from 'styled-components'

type DataChunk = {
    name: string,
    value: any
}

type State = {
    touched: boolean
}

type Props = {
    // will be passed by HOC
    setData: (data: DataChunk) => void,
    getError: (name: string) => ?string,
    getErrors: () => Object,
    className: string, // for the error block
    style: Object // for the error block
    errorCodes: Object,
    
    name: string,
    field: string
}

class NestedError extends Component {
    props: Props;
    
    isTouched() {
        const {children} = this.props;
        return get(children, 'props.value')
    }
    
    state: State = {
        touched: this.isTouched()
    }
    
    setTouched() {
        this.setState({
            touched: true
        })
    }
    
    cloneElement() {
        const {children} = this.props;
        const onBlur = get(children, 'props.onBlur', noop);
        return React.cloneElement(
            children,
            {
                onBlur: compose(this.setTouched, onBlur)
            }
        )
    }
    
    render() {
        const {touched} = this.state;
        const {
            children, 
            field, 
            name, 
            getError,
            errorCodes,
            style,
            className
        } = this.props;
        const errors = getErrors();
        const error = get(errors, `${field}`.${name});
        return (
            <div>
                {touched ? children : this.cloneElement()}
                {error &&
                    <Error
                        className={className}
                        style={style}
                    >
                        {errorCodes[error] || error}
                    </Error
                }
            </div>
        );
    }
}

const Error = styled.div`
    color: red;
`;

export default ValidationComponent(NestedError)

Classes

Validation

prop type default value
data object {}
schema object {}
rules object {}
aliasedRules object {}
className string ''
style object {}
errorCodes object {}

ValidationInput

prop type default value
name string ''
validateOnEvents array ['change', 'blur', 'keyUp']