Example API for react-verificator

react-verificator-example-1.jsx

import React, { Component } from 'react'
import validator from 'react-verificator'

const mapValidatorToProps = ({ ownProps, validator }) => ({
  validator
})

@validator({
  rules: {
    name: 'required',
    email: 'required|email',
    password: 'required|confirmed',
    password_confirmation: 'required',
  },
  attributes: {
    name: 'ФИО',
    email: 'адрес электронной почты',
    password: 'пароль',
    password_confirmation: 'подтверждение пароля',
  },
  messages: {
    required: ({ attribute }) => `Поле ${attribute} обязательно для заполнения.`,
    email: ({ attribute }) => `Поле ${attribute} должно быть действительным электронным адресом.`,
    confirmed: ({ attribute }) => `Поле ${attribute} не совпадает с подтверждением.`,
  }
}, mapValidatorToProps)
class ExampleForm extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
      }
    }
  }

  onInputChange = (name) => {
    return event => {
      const { validator } = this.props

      const state = {
        data: {
          ...this.state.data,
          [name]: event.target.value
        }
      }

      this.setState(state)

      validator.setData(state.data)
    }
  }

  onSubmit = (event) => {
    event.preventDefault()

    this.props.validator.passes().then(isValid => {
      if (isValid) {
        // TODO request form
      }
    })
  }

  render() {
    const { validator } = this.props
    const { data } = this.state

    return (
      <form onSubmit={this.onSubmit}>
        <div>
          <label htmlFor="form-name">ФИО</label>
          <input
            type="text"
            id="form-name"
            placeholder="Введите ФИО"
            value={data.name}
            onChange={this.onInputChange('name')}
          />
          {
            validator.errors.has('name')
            && <span>{validator.errors.first('name')}</span>
          }
        </div>
        <div>
          <label htmlFor="form-email">Email</label>
          <input
            type="text"
            id="form-email"
            placeholder="Введите Email"
            value={data.email}
            onChange={this.onInputChange('email')}
          />
          {
            validator.errors.has('email')
            && <span>{validator.errors.first('email')}</span>
          }
        </div>
        <div>
          <label htmlFor="form-password">Пароль</label>
          <input
            type="text"
            id="form-password"
            placeholder="Введите пароль"
            value={data.password}
            onChange={this.onInputChange('password')}
          />
          {
            validator.errors.has('password')
            && <span>{validator.errors.first('password')}</span>
          }
        </div>
        <div>
          <label htmlFor="form-password_confirmation">Подтверждение пароля</label>
          <input
            type="text"
            id="form-password_confirmation"
            placeholder="Введите подтверждение пароля"
            value={data.password_confirmation}
            onChange={this.onInputChange('password_confirmation')}
          />
          {
            validator.errors.has('password_confirmation')
            && <span>{validator.errors.first('password_confirmation')}</span>
          }
        </div>
        <div>
          <button type="submit">Отправить</button>
        </div>
      </form>
    )
  }
}

react-verificator-example-2.jsx

import React, { Component } from 'react'
import validator from 'react-verificator'

const mapValidatorToProps = ({ ownProps, validator }) => ({
  validator
})

@validator({
  rules: {
    name: 'required',
    email: 'required|email',
    password: 'required|confirmed',
    password_confirmation: 'required',
  },
  attributes: {
    name: 'ФИО',
    email: 'адрес электронной почты',
    password: 'пароль',
    password_confirmation: 'подтверждение пароля',
  },
  messages: {
    required: ({ attribute }) => `Поле ${attribute} обязательно для заполнения.`,
    email: ({ attribute }) => `Поле ${attribute} должно быть действительным электронным адресом.`,
    confirmed: ({ attribute }) => `Поле ${attribute} не совпадает с подтверждением.`,
  }
}, mapValidatorToProps)
class ExampleForm extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
      }
    }
  }

  onInputChange = (name) => {
    return event => {
      const { validator } = this.props

      const state = {
        data: {
          ...this.state.data,
          [name]: event.target.value
        }
      }

      this.setState(state)

      validator.setData(state.data)
    }
  }

  onInputFocus = (name) => {
    return event => {
      const { validator } = this.props

      validator.errors.clear(name)
    }
  }

  onInputBlur = (name) => {
    return event => {
      const { validator } = this.props

      validator.passes(name)
    }
  }

  onSubmit = (event) => {
    event.preventDefault()

    this.props.validator.passes().then(isValid => {
      if (isValid) {
        // TODO request form
      }
    })
  }

  render() {
    const { validator } = this.props
    const { data } = this.state

    return (
      <form onSubmit={this.onSubmit}>
        <div>
          <label htmlFor="form-name">ФИО</label>
          <input
            type="text"
            id="form-name"
            placeholder="Введите ФИО"
            value={data.name}
            onChange={this.onInputChange('name')}
            onBlur={this.onInputBlur('name')}
            onFocus={this.onInputFocus('name')}
          />
          {
            validator.errors.has('name')
            && <span>{validator.errors.first('name')}</span>
          }
        </div>
        <div>
          <label htmlFor="form-email">Email</label>
          <input
            type="text"
            id="form-email"
            placeholder="Введите Email"
            value={data.email}
            onChange={this.onInputChange('email')}
            onBlur={this.onInputBlur('email')}
            onFocus={this.onInputFocus('email')}
          />
          {
            validator.errors.has('email')
            && <span>{validator.errors.first('email')}</span>
          }
        </div>
        <div>
          <label htmlFor="form-password">Пароль</label>
          <input
            type="text"
            id="form-password"
            placeholder="Введите пароль"
            value={data.password}
            onChange={this.onInputChange('password')}
            onBlur={this.onInputBlur('password')}
            onFocus={this.onInputFocus('password')}
          />
          {
            validator.errors.has('password')
            && <span>{validator.errors.first('password')}</span>
          }
        </div>
        <div>
          <label htmlFor="form-password_confirmation">Подтверждение пароля</label>
          <input
            type="text"
            id="form-password_confirmation"
            placeholder="Введите подтверждение пароля"
            value={data.password_confirmation}
            onChange={this.onInputChange('password_confirmation')}
            onBlur={this.onInputBlur('password_confirmation')}
            onFocus={this.onInputFocus('password_confirmation')}
          />
          {
            validator.errors.has('password_confirmation')
            && <span>{validator.errors.first('password_confirmation')}</span>
          }
        </div>
        <div>
          <button type="submit">Отправить</button>
        </div>
      </form>
    )
  }
}