Overwrite the Default Messages in redux-form-validators

Question

I am having difficulty overwriting the default error message in redux-form-validators using the code suggested by the docs:

Object.assign(Validators.messages, {
    required: "This is a required field"
})

This gives an error

Validators is not defined

Problem: What is this Validators object and where/how should we define/use it so that we can overwrite the default messages properly?

/containers/Animals/Animals.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { required } from 'redux-form-validators';
import { renderTextField } from './FormHelpers';

class AnimalForm extends Component {
    constructor(props) {
        super(props);
        Object.assign(Validators.messages, {                // ERROR OCCURS HERE
            required: "This is a required field"
        })
    }

    render() {
        return (
            <div>
                <form>                     
                        <Field
                            label="Longitude"
                            name="location.coordinates[0]"
                            component={renderTextField}
                            type="text"
                            validate={[required()]}
                        />  
                </form>
            </div>
        )
    }

}

export default connect(mapStateToProps)(reduxForm({
    form: 'animal'
})(AnimalForm))

Answer 1

Try adding Validators to your import

import { Validators, required } from 'redux-form-validators'

Answer 2

I would suggest you to do the validation using the inbuilt functionalities of redux-form so that you have more control over your codebase. And it'll be better to seperate your forms rather than putting them in containers which feels a bit weird. I would normally do something like the following:

I have created a stateless component for the form since we aren't planning to change the state inside this component.

forms/animal.form.js

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { renderTextField } from './FormHelpers';
import validate from './validate';
import submit from './submit';

let AnimalForm = (props) => {

  const {
    handleSubmit, submitting,
  } = props;

  return (
    <div>
      <form onSubmit={handleSubmit}>                    
        <Field
          label="Longitude"
          name="longitude"
          component={renderTextField}
          type="text"
        />
        <button type="submit" disabled={submitting}>Submit</button>
      </form>
    </div>
  );
};

AnimalForm = reduxForm({
  form: 'animal',
  onSubmit: submit,
  validate,
})(AnimalForm);

export default AnimalForm;

When you try to submit the form using the "Submit" button, the validate function will be called from validate.js. Do all your validations inside this function. You can even use regex to validate.

forms/validate.js

const validate = (values) => {
  const errors = {};
  if (!values.longitude) {
    errors.longitude = 'This is a required field';
  }
  return errors;
};

export default validate;

Once there are no validation errors, submit function from submit.js is called.

forms/submit.js

function submit(values, dispatch, props) {

  // PERFORM YOUR OPERATIONS HERE AND DISPATCH ACTIONS

  const body = {
    longitude: values.longitude,
  };

  dispatch(createAnimal(body));

}

export default submit;

Hope this helps. Cheers.

Answer 3

If you want to globally override messages, use the Object.assign method in your index.js or some global place - doing it inside a component is an extremely bad idea. To do so globally:

import Validators from 'redux-form-validators'

Object.assign(Validators.messages, {
    required: "This is a required field"
})

// or 

Object.assign(Validators.messages, {
  required: {    
    defaultMessage: "This is a required field"
  }
})

Looking at your sample code, if you want to override it just for the component, then doing it locally is much better:

<Field
    label="Longitude"
    name="location.coordinates[0]"
    component={renderTextField}
    type="text"
    validate={[required({msg: "This is a required field"})]}
/>