unable to display warning messages

[imyagnesh]

Here is my code. but unable to display warning messages using redux-form-material-ui

import React, { Component, PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage } from 'react-intl';
import RaisedButton from 'material-ui/RaisedButton';
import ContentSend from 'material-ui/svg-icons/content/send';
import AuthenticationApi from '../../api/authenticationApi';
import { TextField } from 'redux-form-material-ui';


import baseStyle from '../../common/Style/baseStyle.css';
import style from './styles.css';

const asyncValidate = (values/* , dispatch */) =>
  AuthenticationApi.isUserUnique(values.email).then(result => {
    if (!result.data) throw { email: result.message };
  });

const warn = values => {
  const warnings = {};
  if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    warnings.email = 'Invalid email address';
  }
  if (values.password && !/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/i.test(values.password)) {
    warnings.password = 'Invalid Password';
  }
  if (values.password !== values.confirmPassword) {
    warnings.confirmPassword = 'Password Does not match with Confirm Password';
  }
  return warnings;
};

const validate = values => {
  const errors = {};
  const requiredFields = ['name', 'email', 'password', 'confirmPassword'];
  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Required';
    }
  });
  return errors;
};


class RegistrationForm extends Component {
  componentDidMount() {
    this.refs.name            // the Field
      .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
      .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
      .focus();             // on TextField
  }
  render() {
    const { messages, handleSubmit, pristine, submitting } = this.props;
    return (
      <form className={baseStyle.column} onSubmit={handleSubmit}>
        <div className={style.textDiv}>
          <Field
            name="name"
            component={TextField}
            hintText="Name"
            floatingLabelText="Name"
            ref="name"
            withRef
          />
        </div>
        <div className={style.textDiv}>
          <Field
            name="email"
            component={TextField}
            label="Email"
            hintText="Email"
            floatingLabelText="Email"
          />
        </div>
        <div className={style.multiLineTextDiv}>
          <Field
            name="password"
            component={TextField}
            hintText="Password"
            floatingLabelText="Password"
            type="password"
          />
        </div>
        <div className={style.multiLineTextDiv}>
          <Field
            name="confirmPassword"
            component={TextField}
            hintText="Confirm Password"
            floatingLabelText="Confirm Password"
            type="password"
          />
        </div>
        <div className={style.sendButton}>
          <RaisedButton
            style={{ height: '50px', minWidth: '150px' }}
            labelStyle={{ lineHeight: '50px' }}
            secondary
            label="Submit"
            labelPosition="before"
            type="submit"
            icon={<ContentSend />}
            disabled={pristine || submitting}
          />
        </div>
      </form>
    );
  }
}

RegistrationForm.propTypes = {
  messages: PropTypes.object.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  pristine: PropTypes.bool.isRequired,
  submitting: PropTypes.bool.isRequired,
};

export default reduxForm({
  form: 'RegistrationForm',
  validate,
  asyncValidate,
  asyncBlurFields: ['email'],
  warn,
})(RegistrationForm);

[giancarlo88]

+1

[erikras]

Published fix in v4.1.2.