Add transform hook for changing errors from json schema validation (rjsf-team#432)

Author: jbalboni

README.md

@@ -66,6 +66,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Form data validation](#form-data-validation)
  - [Live validation](#live-validation)
  - [Custom validation](#custom-validation)
+ - [Custom error messages](#custom-error-messages)
  - [Error List Display](#error-list-display)
  - [Styling your forms](#styling-your-forms)
  - [Schema definitions and references](#schema-definitions-and-references)
@@ -1170,6 +1171,36 @@ render((
 > received as second argument.
 > - The `validate()` function is called **after** the JSON schema validation.
 
+### Custom error messages
+
+Validation error messages are provided by the JSON Schema validation by default. If you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list. 
+
+```js
+function transformErrors(errors) {
+ return errors.map(error => {
+ if (error.name === "pattern") {
+ error.message = "Only digits are allowed"
+ }
+ return error;
+ });
+}
+
+const schema = {
+ type: "object",
+ properties: {
+ onlyNumbersString: {type: "string", pattern: "\d*"},
+ }
+};
+
+render((
+ <Form schema={schema}
+ transformErrors={transformErrors} />
+), document.getElementById("app"));
+```
+
+> Notes:
+> - The `transformErrors()` function must return the list of errors. Modifying the list in place without returning it will result in an error.
+
 ### Error List Display
 
 To disable rendering of the error list at the top of the form, you can set the `showErrorList` prop to `false`. Doing so will still validate the form, but only the inline display will show.

playground/app.js

@@ -317,7 +317,8 @@ class App extends Component {
  validate,
  theme,
  editor,
- ArrayFieldTemplate
+ ArrayFieldTemplate,
+ transformErrors
  } = this.state;
 
  return (
@@ -363,6 +364,7 @@ class App extends Component {
  onChange={this.onFormDataChange}
  fields={{geo: GeoPosition}}
  validate={validate}
+ transformErrors={transformErrors}
  onError={log("errors")} />}
  </div>
  </div>

playground/samples/validation.js

@@ -5,6 +5,17 @@ function validate({pass1, pass2}, errors) {
  return errors;
 }
 
+function transformErrors(errors) {
+ return errors.map(error => {
+ if (error.name === "minimum" && error.property === "instance.age") {
+ return Object.assign({}, error, {
+ message: "You need to be 18 because of some legal thing"
+ });
+ }
+ return error;
+ });
+}
+
 module.exports = {
  schema: {
  title: "Custom validation",
@@ -21,12 +32,18 @@ module.exports = {
  type: "string",
  minLength: 3
  },
+ age: {
+ title: "Age",
+ type: "number",
+ minimum: 18
+ }
  }
  },
  uiSchema: {
  pass1: {"ui:widget": "password"},
  pass2: {"ui:widget": "password"},
  },
  formData: {},
- validate
+ validate,
+ transformErrors
 };

src/components/Form.js

@@ -60,8 +60,8 @@ export default class Form extends Component {
  }
 
  validate(formData, schema) {
- const {validate} = this.props;
- return validateFormData(formData, schema || this.props.schema, validate);
+ const {validate, transformErrors} = this.props;
+ return validateFormData(formData, schema || this.props.schema, validate, transformErrors);
  }
 
  renderErrors() {
@@ -202,6 +202,8 @@ if (process.env.NODE_ENV !== "production") {
  acceptcharset: PropTypes.string,
  noValidate: PropTypes.bool,
  liveValidate: PropTypes.bool,
+ validate: PropTypes.func,
+ transformErrors: PropTypes.func,
  safeRenderCompletion: PropTypes.bool,
  formContext: PropTypes.object,
  };

src/validate.js

@@ -96,8 +96,11 @@ function unwrapErrorHandler(errorHandler) {
  * function, which receives the form data and an `errorHandler` object that
  * will be used to add custom validation errors for each field.
  */
-export default function validateFormData(formData, schema, customValidate) {
- const {errors} = jsonValidate(formData, schema);
+export default function validateFormData(formData, schema, customValidate, transformErrors) {
+ let {errors} = jsonValidate(formData, schema);
+ if (typeof transformErrors === "function") {
+ errors = transformErrors(errors);
+ }
  const errorSchema = toErrorSchema(errors);
 
  if (typeof customValidate !== "function") {

test/validate_test.js

@@ -94,6 +94,32 @@ describe("Validation", () => {
  ]);
  });
  });
+
+ describe("transformErrors", () => {
+ const illFormedKey = "bar.'\"[]()=+*&^%$#@!";
+ const schema = {
+ type: "object",
+ properties: {foo: {type: "string"}, [illFormedKey]: {type: "string"}}
+ };
+ const newErrorMessage = "Better error message";
+ const transformErrors = (errors) => {
+ return [
+ Object.assign({}, errors[0], {message: newErrorMessage})
+ ];
+ };
+
+ let errors;
+
+ beforeEach(() => {
+ const result = validateFormData({foo: 42, [illFormedKey]: 41}, schema, undefined, transformErrors);
+ errors = result.errors;
+ });
+
+ it("should use transformErrors function", () => {
+ expect(errors).not.to.be.empty;
+ expect(errors[0].message).to.equal(newErrorMessage);
+ });
+ });
  });
 
  describe("Form integration", () => {