Create dynamic Yup validation schema from JSON

Question

I'm trying to use Yup along with Formik in my react form. The form fields are going to be dynamic so as their validations.

export const formData = [
  {
    id: "name",
    label: "Full name",
    placeholder: "Enter full name",
    type: "text",
    required: true,
    value: "User name",
    values: [],
    validations: [
      {
        type: "minLength",
        value: "5",
        error_message: "name should be atleast 5 char long"
      },
      {
        type: "maxLength",
        value: "10",
        error_message: "name should be atleast 5 char long"
      }
    ]
  },
  {
    id: "email",
    label: "Email",
    placeholder: "Email",
    type: "text",
    required: true,
    value: "email",
    values: [],
    validations: [
      {
        type: "minLength",
        value: "5",
        error_message: "name should be atleast 5 char long"
      },
      {
        type: "maxLength",
        value: "10",
        error_message: "name should be atleast 5 char long"
      },
      {
        type: "email",
        error_message: "Valid email"
      }
    ]
  },
  {
    id: "phoneNumber",
    label: "phone number",
    type: "text",
    required: true,
    value: "7878787878",
    values: [],
    validations: [
      {
        type: "minLength",
        value: "5",
        error_message: "name should be atleast 5 char long"
      },
      {
        type: "maxLength",
        value: "10",
        error_message: "name should be atleast 5 char long"
      },
      {
        type: "required",
        error_message: "phone number is required"
      }
    ]
  },
  {
    id: "total",
    label: "Total People in Family",
    placeholder: "family members count",
    type: "text",
    required: false,
    value: "1",
    values: [],
    validations: [
      {
        type: "minLength",
        value: "1",
        error_message: "there should be atleast 1 family member"
      },
      {
        type: "maxLength",
        value: "5",
        error_message: "max family members can be 5"
      }
    ]
  }
]

 let validateSchema = yup.object().shape({
     name: yup.string().required("name is required"),
     email: yup.string().email(),
     phoneNumber: yup.number().min(10, "minium 10 numbers"),
     total: yup
       .number()
       .min(1, "minium 1 member")
       .max(5, "max 5 member")
       .required("member is required")    });

What I'm currently doing is iterating over the above array and calling the corresponding React form components.
Validation is currently handled by Yup. I'm aware that you can create static Yup validation schema like above `validateSchema' variable.
Now I want to create this validation schema depending upon the values in the formData.validation array. I tried some of the ways in this codesandbox but still unable to figure it out. Also, I looked into the Yup.lazy but it seems highly confusing to me.

Any help will be appreciated :)

Codesandbox

score 31 · Accepted Answer · answered Aug 06 '19 at 09:37

31

In case someone is trying to create yupschema on the fly. With some help, I was able to do it.

import * as yup from "yup";

export function createYupSchema(schema, config) {
  const { id, validationType, validations = [] } = config;
  if (!yup[validationType]) {
    return schema;
  }
  let validator = yup[validationType]();
  validations.forEach(validation => {
    const { params, type } = validation;
    if (!validator[type]) {
      return;
    }
    console.log(type, params);
    validator = validator[type](...params);
  });
  schema[id] = validator;
  return schema;
}

Codesandbox

answered Aug 06 '19 at 09:37

vijayscode

1,905
4
21
37

What is `validationType`? Do we need to define it inside `formData`? – Arpit Kumar Mar 04 '20 at 16:34
What about multiple check-boxes and multi select drop down - its not working as expected – Naresh Ramoliya Apr 23 '20 at 10:41
@vijayscode: May I know how can I create conditional validations using When/is using the above CreateYupSchema. – Sriram R Nov 19 '20 at 14:27
Thanks @vijayscode, it was really helpful. Please check the code sandbox link, all your confusion will be cleared. – Milan Kamilya Mar 19 '21 at 19:24

score 2 · Answer 2 · answered Feb 28 '22 at 03:54

If you're looking for more functionality, consider schema-to-yup.

But @vijayscode's answer is super handy. Here's an attempt to extend their example to include when conditions:

import * as yup from "yup";

function createYupSchema(schema, config) {
  const { id, validationType, validations = [] } = config;
  if (!yup[validationType]) {
    return schema;
  }
  let validator = yup[validationType]();
  validations.forEach((validation) => {
    const { params, type } = validation;
    if (!validator[type]) {
      return;
    }
    if (type === "when") {
      const { is, then, otherwise } = params[1];
      let whenParams = {};
      whenParams.is = is;
      whenParams.then = (schema) => schema[then[0].type](...then[0].params);

      if (otherwise) {
        whenParams.otherwise = (schema) =>
          schema[otherwise[0].type](...otherwise[0].params);
      }

      validator = validator["when"](params[0], whenParams);
    } else {
      validator = validator[type](...params);
    }
  });
  schema[id] = validator;
  return schema;
}

And define your config like so:

const myConfig = [
  {
    id: "isBig",
    validationType: "boolean",
  },
  {
    id: "count",
    validationType: "number",
    validations: [
      {
        type: "when",
        params: [
          "isBig",
          {
            is: true,
            then: [
              {
                type: "min",
                params: [5],
              },
            ],
            otherwise: [
              {
                type: "min",
                params: [0],
              },
            ],
          },
        ],
      },
    ],
  },
];

const schema = myConfig.reduce(createYupSchema, {});
const validateSchema = yup.object().shape(schema);

Hey I have spent some time trying to make yup-to-schema work for more advanced scenario and I must strongly advise against it. It does support only basic stuff and is convoluted beyond imagination. Keep it simple — Dominik, Jan 17 '23 at 17:13

Create dynamic Yup validation schema from JSON

2 Answers2

Linked