Validations enabled with support for custom and realtime validations
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
Playground Example: https://react-jsonschema-form-material-ui.github56.now.sh/#validation
