Merge pull request #1027 from rvsia/betterValidateDocs

Better validate docs

Author: Hyperkid123

packages/react-renderer-demo/src/components/navigation/schemas/schema.schema.js

@@ -1,13 +1,13 @@
 const schemaNav = [
+  {
+    component: 'introduction',
+    linkText: 'Introduction'
+  },
   {
     subHeader: true,
     title: 'FieldProperties',
     noRoute: true
   },
-  {
-    component: 'introduction',
-    linkText: 'Introduction'
-  },
   {
     component: 'clear-on-unmount',
     linkText: 'Clear on unmount'
@@ -69,6 +69,10 @@ const schemaNav = [
     component: 'custom-validator',
     linkText: 'Custom validator'
   },
+  {
+    component: 'custom-validator-message',
+    linkText: 'Custom message'
+  },
   {
     component: 'overwriting-default-message',
     linkText: 'Overwriting default message'

packages/react-renderer-demo/src/examples/components/validators/custom-message.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
+import TextField from '@data-driven-forms/mui-component-mapper/text-field';
+import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+const schema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'custom-validator',
+      validate: [{ type: validatorTypes.REQUIRED, message: 'This field is required' }],
+      validateOnMount: true
+    }
+  ]
+};
+
+const CustomMessage = () => <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />;
+
+export default CustomMessage;

packages/react-renderer-demo/src/pages/schema/custom-validator-message.md

@@ -0,0 +1,21 @@
+import DocPage from '@docs/doc-page';
+import CodeExample from '@docs/code-example';
+
+<DocPage>
+
+# Custom validator message
+
+You can overwrite the messages [globally](/schema/overwriting-default-message) or specifically in each validator object via setting `message` attribute.
+
+```jsx
+{
+    ...,
+    validate: [{type: 'required', message: 'This field is required'}]
+}
+```
+
+## Example
+
+<CodeExample mode="preview" source="components/validators/custom-message" />
+
+</DocPage>

packages/react-renderer-demo/src/pages/schema/introduction.md

@@ -186,14 +186,20 @@ A function allowing to compute field properties from the current state of the fi
 ```jsx
 {
     ...,
-    validate: [{type: 'required'}]
+    validate: [{type: 'required', message: 'This field is required'}]
 }
 ```
 
 Type is one of our provided validators: [required](/schema/required-validator), [length](/schema/length-validator), [URL](/schema/url-validator), [pattern](/schema/pattern-validator), [number value](/schema/number-value-validator). You can use [validatorTypes](/schema/constants#validatortypes) to prevent typos.
 
 Or you can implement your own via creating a [validator mapper](/mappers/validator-mapper).
 
+**Message**
+
+All provided validators let you change the message via [message attribute](/schema/custom-validator-message) or you can set them [globally](/schema/overwriting-default-message).
+
+By default, each validator provides a default message in English.
+
 **function**
 
 You can pass a [custom function](/schema/custom-validator):