React-admin: Feature request: Async validation

[adamreeve]

It would be cool if validation errors when doing a POST/PUT of a resource could be displayed next to the appropriate fields in the edit view.

Eg. a post/put might return a 400 response with JSON data that contains a list of invalid fields along with error messages. The API client could then be configured to map the error response to a list of invalid resources with error message, and then the edit component could display these next to the inputs. The material-ui text field already supports showing errors using the errorText property.

[fzaninotto]

Admin-on-rest relies on redux-form for form validation, and redux-for supports asynchronous validation. So in theory it's not hard to do.

Until we implement it, feel free to use your own <Edit> or <Create> component.

[demetriusnunes]

+1 for async validation support.

If the validation functions could return Promises to indicate async validation, that would be a simple and effective enough API.

[fzaninotto]

Fixed by #420

[edorivai]

I could be mistaken, but as far as I can see, field level validation does not handle asynchronous validation. Is that correct?

When I pass an async function (or a function which returns a Promise), AOR complains about the validation error not being a React node:

Failed prop type: Invalid prop `errorText` supplied to `TextField`, expected a ReactNode.
    in TextField (created by TextInput)
    in TextInput (created by ConnectedField)

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `TextField`.

Redux form supports an asyncValidation function, is there a way we can declare asyncValidation in our Create or Update components?

[sp3ka]

Also experiencing the same issue as @edorivai

[edorivai]

As for as I know, async validation does not work at the field level, but there is a way to hook into the global async validation. See the tip at: https://marmelab.com/admin-on-rest/CreateEdit.html#global-validation

The gist is:

<TabbedForm asyncValidate={yourCustomAsyncValidationFunction}>
    ...
</TabbedForm>

[shakdoesgithub]

having the same issue as @edorivai and @sampeka.
when you pass asyncValidate function to the validate prop, it returns a promise.
How do we pass the fulfilled result to the redux-form?

[shakdoesgithub]

@edorivai well I got it working... on field level...
here is the example :
<SimpleForm asyncValidate={asyncValidate} asyncBlurFields={[ 'firstName' ]}> <TextInput source="firstName" /> </SimpleForm>

You pass in the asyncValidate to the Form component, and the asyncBlurFields you pass in the fields that will trigger the asyncValidation.

[MoonSeeing]

@fzaninotto now In the react 3.0 whether to support async validation?now did not use redux-form.so ,can async validation of server be realized?

[fzaninotto]

I suppose, since you can pass whatever props you want to the SimpleForm and they'll get passed to the react-final-form. I invite you to try!

[MoonSeeing]

@fzaninotto you mean can use props 'asyncValidate' in SimpleForm of 3.0?

[fzaninotto]

I mean you have to look at how react-final-form handles it. I have no idea how it works, we don't need it for now, so you'll have to do the digging.

[MoonSeeing]

@fzaninotto ok i have try ,thanks a lot