#375 Provision to add custom validation rules for field renderers

src/reactapp/src/customValidationRules.js

@@ -0,0 +1,8 @@
+/**
+ * Here you can define your own custom validation rules which will be applied
+ * to fields using field renderers.
+ */
+export default {
+  min_text_length: (schema, minLength) => schema.min(minLength),
+  max_text_length: (schema, maxLength) => schema.max(maxLength),
+};

src/reactapp/src/utils/validation.js

@@ -1,12 +1,13 @@
-import { get as _get } from 'lodash-es';
 import {
   bool as YupBool,
   array as YupArray,
   string as YupString,
   number as YupNumber,
 } from 'yup';
+import { get as _get } from 'lodash-es';
 
 import { __ } from '../i18n';
+import customValidationRules from '../customValidationRules';
 
 const requiredMessage = __('%1 is required');
 
@@ -19,7 +20,9 @@ export const yupSchemaByFieldType = {
 
 /**
  * Bult-in support of rule mapping.
+ *
  * It maps magento validation rules with corresponding yup rule here.
+ *
  */
 export const yupValidationRules = {
   required: (schema) => schema.required(requiredMessage),
@@ -31,9 +34,8 @@ export const yupValidationRules = {
       (value, context) =>
         !!_get(context, `parent.${ruleConfig.field}.${ruleConfig.index}`)
     ),
-  min_text_length: (schema, minLength) => schema.min(minLength),
-  max_text_length: (schema, maxLength) => schema.max(maxLength),
   email: (schema) => schema.email(),
   url: (schema) => schema.url(),
   date: (schema) => schema.date(),
+  ...customValidationRules,
 };