Custom validations

Validate form properties

AdminJS by default validates properties based on rules defined by the database schema. But sometimes you might need to adjust it to your particular needs.

How validation works in AdminJS

AdminJS validates fields on the backend and sends errors back to the react frontend.

Information about the errors is send inside the RecordJSON object in the RecordActionResponse.

Example

so this might be the standard output (RecordActionResponse) of an edit action:

{
  record: { // RecordJSON
    id: 123123123,
    title: 'Your mother',
    params: {name: ''},
    populated: {...},
    recordActions: [...],
    bulkActions: [...],
    errors: { // validation errors goes here
      name: {
        message: 'cannot be blank'
      }
    }
  }
}

Frontend sees that RecordJSON has errors for property name and it prints them below the "name" input.

Custom validations with ValidationError

The most versatile way of adding custom validation errors is by throwing ValidationError in either:

• before action hook,
• after action hook or in the
• action handler

You can use your custom validator like ClassValidator or validate data yourself.

This is an example of throwing validation error in before new action hook:

const resourceOptions = {
  actions: {
    new: {
      before: async (request) => {
        const {method, payload} = request
        if (method === 'post' && payload.name === 'forbidden') {
          throw new ValidationError({
            name: {
              message: 'cannot be "forbidden"',
            },
          }, {
            message: 'something wrong happened',
          })
        }
        return request
      }
    }
  }
}

when the user gives "forbidden name" in the input for name property - it will trigger a validation error.

ValidationError takes 2 arguments:

• map with errors for each field
• notice error which will appear on the top of the UI

They are optional so you can show only one of them or both.

The downside of this approach is that it clears all the other validation errors. So if database adapter spotted problems and you threw an error in after hook - those previous errors won't get to the response.

Manually filling response with validation errors

Sometimes you might want to manually adjust the errors returned by the database adapter. You can do this manually by modifying the response.

As I wrote in the beginning errors are stored inside the RecordJSON object. So in order to change that - you have to modify it.

This is an example of copying error message from one property: 'encryptedPassword' to another 'password' in after action hook:

const resourceOptions = {
  actions: {
    new: {
      after: async (response) => {
        if (response.record && response.record.errors && response.record.errors.encryptedPassword) {
          response.record.errors.password = response.record.errors.encryptedPassword;
        }
        return response;
      };
    }
  }
}

(You can take a look at this video where this particular example is used).