Show server-side validation errors after failed form submit

Question

How can I show validation messages after failed form submit? API request returns HTTP 400 'application/problem+json' response and contains violations as a list with field path.

https://www.rfc-editor.org/rfc/rfc7807#section-3

{
   "type": "https://example.net/validation-error",
   "title": "Your request parameters didn't validate.",
   "invalid-params": [ 
      {
         "name": "age",
         "reason": "must be a positive integer"
      },
      {
         "name": "color",
         "reason": "must be 'green', 'red' or 'blue'"
      }
   ]
}

Waterish

Can you find a solution? I have the same problem – Tributary

Possible duplicate of how can I show customized error messaged from server side validation in React Admin package? – Eloiseelon

@ChristiaanWesterbeek I think I found the best why to handle it. – Hartz

Answer 1

I have the solution for you, I'd recommend to do it with Saga and HttpError.

First, from our dataProvider we need to throw the HttpError like this:

...
import {HttpError} from 'react-admin';
...
...

// Make the request with fetch/axios whatever you prefer and catch the error:
// message - the message that will appear in the alert notification popup
// status - the status code
// errors - the errors in key => value format, example in comment below
return fetchClient.request(config).then((response) => {
      return convertHTTPResponse(response, type, resource, params);
    }).catch(function (error) {
      throw new HttpError(error.response.data.message, error.response.status, error.response.data.errors);
    });

Then create saga like that:

import {CRUD_CREATE_FAILURE} from "react-admin";
import {stopSubmit} from 'redux-form';
import {put, takeEvery} from "redux-saga/effects";

export default function* errorSagas() {
  yield takeEvery(CRUD_CREATE_FAILURE, crudCreateFailure);
}

export function* crudCreateFailure(action) {
  var json = action.payload;
  // json structure looks like this:
  // {
  //     username: "This username is already taken",
  //     age: "Your age must be above 18 years old"
  // }
  yield put(stopSubmit('record-form', json));
}

Please make sure the errors (json) is in the format like in the example above!

Then insert the saga in the componenet:

import errorSagas from './sagas/errorSagas';
...
...

<Admin
        customSagas={[ errorSagas ]}
        loginPage={LoginPage}
        authProvider={authProvider}
        dataProvider={dataProvider}
      >

Boom! it works

Good luck!

Hartz

is this solution amendable to work on react admin 3? If not (the new form library does not use Redux anymore), do you maybe have any pointers about how to do it with current versions?? – Oligocene

It is not working in RA 3... I will share solution later – Hartz

@Hartz did you find it? – Decade

Yes, super complicated, it is an issue of react-admin which does not let us display errors. We solved it in a super custom work. I can advice to use final-form.org/docs/react-final-form/api/FormSpy – Hartz