PersonForm.jsx

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import { PersonSyncValidator, PersonAsyncValidator } from './PersonValidator';
import Icon from '../../icon/javascript/icon';

import '../sprite-icons/author.svg';
import '../sprite-icons/blog.svg';
import '../sprite-icons/book.svg';
import '../sprite-icons/close.svg';
import '../sprite-icons/delete.svg';
import '../sprite-icons/developer.svg';
import '../sprite-icons/dot.svg';
import '../sprite-icons/edit.svg';
import '../sprite-icons/editor.svg';
import '../sprite-icons/email.svg';
import '../sprite-icons/empty.svg';
import '../sprite-icons/github.svg';
import '../sprite-icons/plus.svg';
import '../sprite-icons/save.svg';
import '../sprite-icons/search.svg';
import '../sprite-icons/team.svg';
import '../sprite-icons/translator.svg';
import '../sprite-icons/trello.svg';
import '../sprite-icons/twitter.svg';

import '../styles/Person.css';

// const Actions = require('../../../actions/person_actions.js');

const renderField = ({
  input,
  icon,
  name,
  label,
  placeholder,
  type,
  meta,
}) => {
  const { asyncValidating, touched, error } = meta;
  console.log('meta: ', meta);
  return (
    <label className="person__label">
      <input {...input} className={`person__input ${meta.dirty ? '' : ' person__input--clean'}${meta.asyncValidating ? ' person__input--validating' : ''}${meta.error ? ' person__input--invalid' : ''}`} name={name} type={type} placeholder={placeholder} />
      <Icon icon={icon} className="icon--person" />
      {null && touched && error && <span>{error}</span>}
    </label>
  );
};

class PersonForm extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { valid, error, handleSubmit, pristine, reset, submitting } = this.props;
    console.log(this.props);

    return (
      <form className="person person--form" onSubmit={handleSubmit} >
        <fieldset className="person__fieldset person__fieldset--person" >
          <div className="person__preview">
            <Icon icon="empty" classList="icon--avatar" width={80} height={80} />
          </div>
          <Field className="person__input" icon="dot" name="name" component={renderField} type="text" placeholder="Имя" />
          <Field className="person__input" icon="dot" name="picture" component={renderField} type="url" placeholder="URL Аватара" />
        </fieldset>
        <fieldset className="person__fieldset person__fieldset--contacts">
          <Field className="person__input" icon="github" name="github" component={renderField} type="text" placeholder="GitHub" />
          <Field className="person__input" icon="twitter" name="twitter" component={renderField} type="text" placeholder="Twitter" />
          <Field className="person__input" icon="blog" name="blog" component={renderField} type="url" placeholder="Blog" />
          <Field className="person__input" icon="email" name="email" component={renderField} type="email" placeholder="Email" />
          <Field className="person__input" icon="trello" name="trello" component={renderField} type="email" placeholder="Trello" />
        </fieldset>
        <fieldset className="person__fieldset person__fieldset--menu">
          <button className="person__button person__button--submit" type="submit" disabled={!valid || pristine || submitting}>
            <Icon icon="save" classList="icon--person" />
          </button>
          <button className="person__button person__button--close" type="button">
            <Icon icon="close" classList="icon--person" />
          </button>
        </fieldset>
      </form>);
  }
}

PersonForm.contextTypes = {
  store: PropTypes.object,
};

export default reduxForm({
  form: 'person',
  validate: PersonSyncValidator,
  asyncValidate: PersonAsyncValidator,
  asyncBlurFields: ['github', 'twitter', 'trello', 'email', 'blog'],
})(PersonForm);

PersonValidation.jsx

export function PersonAsyncValidator(values, somefunc, someobj, changed) {
  console.log(values, 'изменилось: ', changed, values[changed]);

  return new Promise(async (resolve) => {
    let answer;
    switch (changed) {
      case 'github':
        answer = await Services.getGithubUser(values[changed]);
        if (!answer.success) {
          answer = {
            github: 'I can not found user on github',
          };
          throw answer;
        }
        break;
      case 'twitter':
        answer = await Services.getTwitterUser(values[changed]);
        if (!answer.success) {
          answer = {
            twitter: 'I can not found user on twitter',
          };
          throw answer;
        }
        break;
      case 'trello':
        answer = await Services.getTrelloUser(values[changed]);
        if (!answer.success) {
          answer = {
            trello: 'I can not found user on trello',
          };
          throw answer;
        }
        break;
      case 'blog':
        answer = await Services.checkURL(values[changed]);
        if (!answer.success) {
          answer = {
            blog: 'URL is not answering',
          };
          throw answer;
        }
        break;
      default:
        break;
    }

    resolve();
  });
}