Skip to content

Validations enabled with support for custom and realtime validations

Choose a tag to compare

@vip-git vip-git released this 12 Nov 21:17
bce0f18

Validations are now enabled can be seen below with following example.
Detailed docs can be seen here

React Component

// Library Import
import Form from 'react-jsonschema-form-material-ui';

// Form Model
const schema = require('./schema.json');
const uiSchema = require('./uiSchema.json');
const formData = require('./formData.json');

const MaterialJsonSchemaForm = () => (
  <Form
	schema={givenSchema}
	uiSchema={givenUISchema}
	formData={givenFormData}
	onSubmit={onSubmit}
        validations={{
	    confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
	      message: validations.confirmPassword.message,
	      inline: true,
	    }),
	}}
  />
);

Schema.json

{
  "title": "Custom validation",
  "description": "This form defines custom validation rules checking that the two passwords match.",
  "type": "object",
  "properties": {
    "pass1": {
      "title": "Password",
      "type": "string",
      "minLength": 3
    },
    "pass2": {
      "title": "Repeat password",
      "type": "string",
      "minLength": 3
    },
    "age": {
      "title": "Age",
      "type": "number",
      "minimum": 18
    }
  }
}

UI-Schema.json

{
  "pass1": {
    "ui:widget": "password"
  },
  "pass2": {
    "ui:widget": "password",
    "ui:validations": {
      "confirmPassword": {
	   "message": "Both passwords should be the same (2)",
	   "inline": true
      }
    }
  }
}

Output

image

Playground Example: https://react-jsonschema-form-material-ui.github56.now.sh/#validation