CODEWITHSUNDEEP
javascriptreactjsreact-reduxredux-form
stone
stone

Reputation: 8652

Redux-form v5: How to clear/hide submit error after field edited

Edit: Focusing the question

How can I clear the form-level submit error for a form wrapped by Redux-Form v. 5.3.3?

I use Redux-Form in several forms with anynchronous Submit behavior. All of them use props.error to get the submit error to show the user.

When the user edits the form fields, the error message no longer applies. So I'd like to clear it (or at the very least, not show it to the user) until the next submission.

Editing fields clears the field-level error property (e.g. props.fields.email.error). How can I also clear the form-level error property?

Alternatively, can you recommend a reliable way to determine that one or more fields have been edited since the submit? I could use that to hide the error message in that scenario.

The form code looks like this:

const MyForm = (props) => {
  const { fields: {name},
    error,
    handleSubmit,
    mySubmitHandler,
    submitting,
    ...otherprops
  } = props;

  return (
  <form onSubmit={ handleSubmit((values)=>{return mySubmitHandler(values, otherprops);}) }>
    <div className="error-message">{error}</div>
    <input {...name}>
  </form>
  );
};

And the wrapper:

function mapStateToProps(state) {
  return {
    user: state.authReducer.user
  };
}

function mapDispatchToProps(dispatch)
{
  return {
    mySubmitHandler: (values, props) =>{
      const { name } = values;
      const { user } = props;
      return dispatch(doAsyncAction(name, user))
      .catch(err=>{
        return Promise.reject({_error: err.message, name: err.message});
      });
    }
  };
}

function clientValidate(values)
{
  values = trimSpaces(values);
  const { name } = values;
  if (!name)
  {
    return {
      name: 'You must enter a name',
      _error: 'You must enter a name'
    };
  }
}

const fields = ['name'];
let MyFormContainer = reduxForm({
  form: 'myFormName',
  fields,
  validate: clientValidate,
  submitting: false
}, mapStateToProps, mapDispatchToProps)(MyForm);


export default MyFormContainer;

Thanks in advance! p.s. This is similar (maybe identical?) to this unanswered question about redux-form v6.

Original question:

Behavior I'm looking for:

  1. User submits the form with "bad" data
  2. The form Error message (for the form overall, not for a specific field) is displayed and field text color changes to red using CSS
  3. User clicks on the field
  4. Text turns back to black
  5. User makes an edit (types a char or deletes a char)
  6. Error message disappears

This seems like pretty standard behavior, but I've been unable to make it happen so far. If there's a built-in way to do this (or something similar), I'd love to hear about it.

Edit:

Item 4 is handled via the field.active property. Thanks, @Erik!

I would like to know how to clear the error when the user focuses back into the field, or at least when they edit the field.

Upvotes: 2

Views: 3315

Answers (1)

Erik R.
Erik R.

Reputation: 7272

Making a change to your field value will remove the submit error for that field in v5, so your #6 should work.

As for styling the text of the input on focus, that could either be done with the pseudo class :focus, as you suggest, or by adding a class with the this.props.fields.myField.focus flag that redux-form provides.

if(myField.focus) {
   // set style to black
} else if(myField.touched && myField.error) {
   // set style to red
}

Upvotes: 1

Related Questions