Create dynamic validation schema. #559

vijayranghar · 2019-06-23T18:23:16Z

I have a JSON from which I'm trying to create dynamic form and validation. I'm using Yup along with Formik. I want to create the validation schema after iterating over the form elements validation key but I'm not sure how to do this.

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"
      }
    ]
  }
]

I want to create something like after iterating over the validation but I'm unable to do so.

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")    
})

Which I will send to Formik. I looked into many links, even posted on SO but couldn't find any useful lead.

Codesandbox

The text was updated successfully, but these errors were encountered:

akmjenkins · 2019-06-23T18:41:05Z

This is the only open source one available right now - https://www.npmjs.com/package/json-schema-to-yup I'm working on something similar because it didn't suit my needs, but it's not ready for open source yet.

vijayranghar · 2019-08-07T06:01:24Z

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

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

ybv · 2019-08-20T00:20:15Z

@vijayranghar this approach is solid! thanks for sharing

bishoymelek-zz · 2019-09-15T12:05:30Z

Thanks @vijayranghar for sharing it. was looking for that exact way to solve it.

Shaker-Hamdi · 2019-09-19T09:42:04Z

@vijayranghar Great example, just one thing I can't get my head around is this ...
createYupSchema(schema, config)
Where does the "schema" come from?
In the form.js you reduce like this ...
const yepSchema = formData.reduce(createYupSchema, {});
But I just can't figure it out.
It would be great if you could explain it.

Shaker-Hamdi · 2019-09-19T12:32:22Z

@vijayranghar one more question, how to add to an existing validation schema? Let's say I already have two inputs inside the form that doesn't get generated dynamically and they already have validation inside an existing schema, how to add to that the dynamic validation?

vijayranghar · 2019-10-02T12:03:29Z

@Shaker-Hamdi https://codesandbox.io/s/clever-snyder-1u410?fontsize=14

saurabhnemade · 2019-12-21T08:58:57Z

@vijayranghar is there any way to support object and array in implementation?

CodeSchneider · 2020-01-02T15:54:47Z

@vijayranghar this is elegant. Thank you for sharing.

ljhyeok · 2020-03-17T07:21:50Z

@vijayranghar thank you!!

lookfirst · 2020-03-25T04:05:47Z

Edit. Just a little any makes everybody happy.

import * as yup from "yup";

export function createYupSchema(schema: any, config: any) {
	const {id, validationType, validations = []} = config;

	if (!(yup as any)[validationType]) {
		return schema;
	}

	let validator = (yup as any)[validationType]();

	validations.forEach((validation: any) => {
		const {params, type} = validation;
		if (!validator[type]) {
			return;
		}
		validator = validator[type](...params);
	});

	schema[id] = validator;
	return schema;
}

ritchieanesco · 2020-04-02T04:29:42Z

Although this issue is resolved.. for those looking for a way to do this via a utility I just released this: https://www.npmjs.com/package/json-schema-yup-transformer

lookfirst · 2020-04-02T19:38:07Z

Although this issue is resolved.. for those looking for a way to do this via a utility I just released this: https://www.npmjs.com/package/json-schema-yup-transformer

Can you explain how your project is different / better / more appealing than the existing one? https://www.npmjs.com/package/json-schema-to-yup

Competition is good, but why not just work with the existing one to improve it?

ritchieanesco · 2020-04-02T23:43:43Z

I’ve contributed to schema to yup, it’s a good project...however decided to build my own because:

Does not adhere to the draft 7 spec
Lacks good code coverage
The code is hard to read and debug
It feels like it’s more catered to making schemas work with yup as opposed to adhering to schema specifications

The main difference I see with schema to yup is that is intended to work with all sorts of schemas but does not strictly adhere to their rules.

Hope that helps.

lookfirst · 2020-04-02T23:59:13Z

@ritchieanesco Fantastic reasons! You should add... written in typescript. =)

I just took a look and you've got nice test coverage. I'll definitely go with yours when I need it. Keep up the great work.

akhilaravind · 2020-04-26T16:49:31Z

@lookfirst how can we add conditional validation here, like
Yup.object().shape({ email: Yup.string().email('Invalid email address').required('Email is required!'), username: Yup.string().required('This man needs a username').when('email', (email, schema) => { if (email === 'foobar@example.com') { return schema.min(10); } return schema; }), });

thealexandrelara · 2020-05-16T12:23:46Z

@lookfirst how can we add conditional validation here, like
Yup.object().shape({ email: Yup.string().email('Invalid email address').required('Email is required!'), username: Yup.string().required('This man needs a username').when('email', (email, schema) => { if (email === 'foobar@example.com') { return schema.min(10); } return schema; }), });

For this to work your config should look like this:

const exampleFieldConfig = {
    id: "username",
    label: "Username",
    placeholder: "username",
    type: "text",
    validationType: "string",
    required: true,
    value: undefined,
    validations: [
      {
        type: "required",
        params: ["this field is required"]
      },
      {
        type: "min",
        params: [5, "current min: 5 characters"]
      },
      {
        type: "when",
        params: [
          "email",
          (email, schema) => {
            return email === "foobar@example.com" ? schema.min(10, "current min: 10 characters") : schema;
          }
        ]
      }
    ]
  }

Then you can pass it to the function:

createYupSchema({}, exampleFieldConfig)

gmonte · 2020-08-28T04:00:40Z

Hi everyone!
In my case, I don't want write a lot of code to do the nested validations that Yup do "automatically".
So I resolved the dynamic validation creating a function that receive the data to validate, and in the field that I want change the validation, I execute an lambda function that return the corresponding new Yup instance.

import * as Yup from 'yup'

const schemaGenerator = data => Yup.object().shape({
  name: Yup.string().required('this field is required'),
  email: Yup.string().email('enter a valid email').required('this field is required'),
  address: Yup.object().shape({
    city: Yup.string().required('this field is required'),
    neighborhood: (() => {
      let validation = Yup.string()
      if (data?.address?.street) {
        validation = validation.required('this field is required')
      }
      return validation
    })(), // lambda function here to create neighborhood schema dinamically!
    street: Yup.string()
  })
})

So, to:

schemaGenerator({
  name: '',
  email: '',
  address: {
    city: '',
    neighborhood: '',
    street: ''
  }
})

I have corresponding Yup schema:

Yup.object().shape({
  name: Yup.string().required('this field is required'),
  email: Yup.string().email('enter a valid email').required('this field is required'),
  address: Yup.object().shape({
    city: Yup.string().required('this field is required'),
    neighborhood: Yup.string(),
    street: Yup.string()
  })
})

And to:

schemaGenerator({
  name: '',
  email: '',
  address: {
    city: '',
    neighborhood: '',
    street: 'something'
  }
})

I have corresponding Yup schema:

Yup.object().shape({
  name: Yup.string().required('this field is required'),
  email: Yup.string().email('enter a valid email').required('this field is required'),
  address: Yup.object().shape({
    city: Yup.string().required('this field is required'),
    neighborhood: Yup.string().required('this field is required'),
    street: Yup.string()
  })
})

Cuantico · 2020-09-08T19:49:52Z

@vijayranghar thas is nice!!! thank you very much, do you know how to add a nullable validation to a date field with this approach?

Waqqars987 · 2020-11-06T10:34:44Z

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

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

Hi,

I have the following schema requirement:

validationSchema: Yup.object({
		dialCode: Yup.string().required('Required'),
		mobileNumber: Yup.string().trim().when('dialCode', (dialCode, schema) => {
			return schema
				.phone(getAlpha2Code(dialCode), true, 'Phone number is invalid')
				.required('Phone number is required');
		})
	}),

getAlpha2Code is function which returns the Alpha2Code of a particular country from its dial code.
How do I create a JSON schema for this particular Yup schema? What should the validations array look like, especially for the mobileNumber?
Please help.

developdeez · 2021-01-06T17:21:48Z

@Waqqars987 I was wondering the same. I have a JSON that contains the inputs and although Im able to get min and max working. Required never seems to pickup

import * as yup from "yup";

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

Input:

 "inputs": [
      {
        "id": "name",
        "type": "text",
        "label": "Name",
        "validationType": "string",
        "validations": [
          {
            "type": "required",
            "msg": "this field is required"
          },
          {
            "type": "min",
            "value": 5,
            "msg": "name cannot be less than 5 characters"
          },
          {
            "type": "max",
            "value": 10,
            "msg": "name cannot be more than 10 characters"
          }
        ]
      }]
      ```

Waqqars987 · 2021-01-06T17:24:53Z

@Waqqars987 I was wondering the same. I have a JSON that contains the inputs and although Im able to get min and max working. Required never seems to pickup

import * as yup from "yup";

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

Required does work for me. However, I can't figure out how to make other Yup functions work as per my requirements.

developdeez · 2021-01-06T17:25:50Z

@Waqqars987 I was wondering the same. I have a JSON that contains the inputs and although Im able to get min and max working. Required never seems to pickup
import * as yup from "yup";

export default function createYupSchema(schema, config) {
  const { id, validationType, validations = [] } = config;
  if (!yup[validationType]) {
    return schema;
  }
  let validator = yup[validationType]();
  validations.forEach((validation) => {
    const { type, value, msg } = validation;
    if (!validator[type]) {
      return;
    }
    validator = validator[type](value, msg);
  });
  schema[id] = validator;
  return schema;
}
Required does work for me. However, I can't figure out how to make other Yup functions work as per my requirements.

What shape is your JSON? I've attached mine above

WaqqarSuleman · 2021-01-07T06:18:16Z

@Waqqars987 I was wondering the same. I have a JSON that contains the inputs and although Im able to get min and max working. Required never seems to pickup
import * as yup from "yup";

export default function createYupSchema(schema, config) {
  const { id, validationType, validations = [] } = config;
  if (!yup[validationType]) {
    return schema;
  }
  let validator = yup[validationType]();
  validations.forEach((validation) => {
    const { type, value, msg } = validation;
    if (!validator[type]) {
      return;
    }
    validator = validator[type](value, msg);
  });
  schema[id] = validator;
  return schema;
}
Required does work for me. However, I can't figure out how to make other Yup functions work as per my requirements.
What shape is your JSON? I've attached mine above

{
id: "label",
label: "Field Label",
placeholder: "Enter Label",
control: "text",
validationType: "string",
validations: [{type: "required", params: ["Field Label is required."]}],
}

WaqqarSuleman · 2021-01-07T15:07:05Z

What should the object for yup.array().of(yup.string()) validation look like?

scrapecoder · 2021-03-10T10:26:22Z

how to validate the two fields value are same or not when creating dynamic yup object
eg - password and confirm password

for static i can use -
password: yup.string().required('Password is required'), confirmPassword: yup.string().oneOf([yup.ref('password'), null], "Passwords don't match").required('Confirm Password is required')

but how to create this object dynamic?

dclark27 · 2021-04-01T16:20:48Z

Just wanted to share an expanded version of all of the great ideas in here. This works with nested objects, as well as arrays.
It also supports custom messages for default errors with the validationTypeError prop.

I'm sure there is a shorter way to do this, but I haven't gotten around to refactoring yet. It does have a bunch of tests but I'll update as I find issues. This thread really saved my butt!

It takes an array of fields like so:

 const fields = [
  {
    name: 'applicant.0.firstName', // in an array
    label: 'First name',
    validationType: 'string',
    validations: [
      {
        type: 'required',
        params: ['Required']
      }
    ]
  },
  {
    name: 'person.lastName', // nested in an object
    label: 'Last name',
    validationType: 'string',
    validations: [
      {
        type: 'required',
        params: ['Required']
      }
    ]
  },
    {
    name: 'email', // non nested, non array
    label: 'Email',
    validationType: 'string',
    validations: [
      {
        type: 'required',
        params: ['Required']
      }
    ]
  }
]

and returns this:

yup.object().shape({
  applicant: yup.array().of(yup.object.shape({
    firstName: yup.string().required()
  })),
  person: yup.object().shape({
    lastName: yup.string().required()
  }),
  email: yup.string().required()
})

Here is the source:

import * as yup from 'yup'

const getValidationSchema = (fields) => {
  const schema = fields.reduce((schema, field) => {
    const { name, validationType, validationTypeError, validations = [] } = field
    const isObject = name.indexOf('.') >= 0

    if (!yup[validationType]) {
      return schema
    }
    let validator = yup[validationType]().typeError(validationTypeError || '')
    validations.forEach(validation => {
      const { params, type } = validation
      if (!validator[type]) {
        return
      }
      validator = validator[type](...params)
    })

    if (!isObject) {
      return schema.concat(yup.object().shape({ [name]: validator }))
    }

    const reversePath = name.split('.').reverse()
    const currNestedObject = reversePath.slice(1).reduce((yupObj, path, index, source) => {
      if (!isNaN(path)) {
        return { array: yup.array().of(yup.object().shape(yupObj)) }
      }
      if (yupObj.array) {
        return { [path]: yupObj.array }
      }
      return { [path]: yup.object().shape(yupObj) }
    }, { [reversePath[0]]: validator })

    const newSchema = yup.object().shape(currNestedObject)
    return schema.concat(newSchema)
  }, yup.object().shape({}))

  return schema
}

export default getValidationSchema

akhilaravind · 2021-05-27T12:58:13Z

@lookfirst how can we add conditional validation here, like
Yup.object().shape({ email: Yup.string().email('Invalid email address').required('Email is required!'), username: Yup.string().required('This man needs a username').when('email', (email, schema) => { if (email === 'foobar@example.com') { return schema.min(10); } return schema; }), });

For this to work your config should look like this:
const exampleFieldConfig = {
    id: "username",
    label: "Username",
    placeholder: "username",
    type: "text",
    validationType: "string",
    required: true,
    value: undefined,
    validations: [
      {
        type: "required",
        params: ["this field is required"]
      },
      {
        type: "min",
        params: [5, "current min: 5 characters"]
      },
      {
        type: "when",
        params: [
          "email",
          (email, schema) => {
            return email === "foobar@example.com" ? schema.min(10, "current min: 10 characters") : schema;
          }
        ]
      }
    ]
  }
Then you can pass it to the function:
createYupSchema({}, exampleFieldConfig)

This is not working and it returns a cyclic dependency error

akalana · 2022-12-02T05:36:23Z

Hey, Is there any suggestion for converting Joi description into the Yup ?

consciousnessdev · 2023-12-03T08:44:13Z

Just wanted to share an expanded version of all of the great ideas in here. This works with nested objects, as well as arrays. It also supports custom messages for default errors with the validationTypeError prop.

I'm sure there is a shorter way to do this, but I haven't gotten around to refactoring yet. It does have a bunch of tests but I'll update as I find issues. This thread really saved my butt!

It takes an array of fields like so:

 const fields = [
  {
    name: 'applicant.0.firstName', // in an array
    label: 'First name',
    validationType: 'string',
    validations: [
      {
        type: 'required',
        params: ['Required']
      }
    ]
  },
  {
    name: 'person.lastName', // nested in an object
    label: 'Last name',
    validationType: 'string',
    validations: [
      {
        type: 'required',
        params: ['Required']
      }
    ]
  },
    {
    name: 'email', // non nested, non array
    label: 'Email',
    validationType: 'string',
    validations: [
      {
        type: 'required',
        params: ['Required']
      }
    ]
  }
]

and returns this:

yup.object().shape({
  applicant: yup.array().of(yup.object.shape({
    firstName: yup.string().required()
  })),
  person: yup.object().shape({
    lastName: yup.string().required()
  }),
  email: yup.string().required()
})

Here is the source:

import * as yup from 'yup'

const getValidationSchema = (fields) => {
  const schema = fields.reduce((schema, field) => {
    const { name, validationType, validationTypeError, validations = [] } = field
    const isObject = name.indexOf('.') >= 0

    if (!yup[validationType]) {
      return schema
    }
    let validator = yup[validationType]().typeError(validationTypeError || '')
    validations.forEach(validation => {
      const { params, type } = validation
      if (!validator[type]) {
        return
      }
      validator = validator[type](...params)
    })

    if (!isObject) {
      return schema.concat(yup.object().shape({ [name]: validator }))
    }

    const reversePath = name.split('.').reverse()
    const currNestedObject = reversePath.slice(1).reduce((yupObj, path, index, source) => {
      if (!isNaN(path)) {
        return { array: yup.array().of(yup.object().shape(yupObj)) }
      }
      if (yupObj.array) {
        return { [path]: yupObj.array }
      }
      return { [path]: yup.object().shape(yupObj) }
    }, { [reversePath[0]]: validator })

    const newSchema = yup.object().shape(currNestedObject)
    return schema.concat(newSchema)
  }, yup.object().shape({}))

  return schema
}

export default getValidationSchema

How to validate array length?

example data:

const fields = [
  {
    name: 'applicant.0.arrayOfName', // is an array
    label: 'List Of First name',
    validationType: 'array',  // like this, or how?
    validations: [
      {
        type: 'min',
        params: [1, 'Required'] // [length, message]
      }
    ]
  },
...
]

vijayranghar closed this as completed Aug 7, 2019

bmigirl mentioned this issue Aug 30, 2022

Implement schema autogeneration in checkout saleor/storefront#431

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create dynamic validation schema. #559

Create dynamic validation schema. #559

vijayranghar commented Jun 23, 2019 •

edited

Loading

akmjenkins commented Jun 23, 2019

vijayranghar commented Aug 7, 2019 •

edited

Loading

ybv commented Aug 20, 2019

bishoymelek-zz commented Sep 15, 2019

Shaker-Hamdi commented Sep 19, 2019

Shaker-Hamdi commented Sep 19, 2019 •

edited

Loading

vijayranghar commented Oct 2, 2019

saurabhnemade commented Dec 21, 2019

CodeSchneider commented Jan 2, 2020

ljhyeok commented Mar 17, 2020

lookfirst commented Mar 25, 2020 •

edited

Loading

ritchieanesco commented Apr 2, 2020

lookfirst commented Apr 2, 2020

ritchieanesco commented Apr 2, 2020 •

edited

Loading

lookfirst commented Apr 2, 2020

akhilaravind commented Apr 26, 2020

thealexandrelara commented May 16, 2020

gmonte commented Aug 28, 2020 •

edited

Loading

Cuantico commented Sep 8, 2020

Waqqars987 commented Nov 6, 2020 •

edited

Loading

developdeez commented Jan 6, 2021 •

edited

Loading

Waqqars987 commented Jan 6, 2021

developdeez commented Jan 6, 2021

WaqqarSuleman commented Jan 7, 2021

WaqqarSuleman commented Jan 7, 2021

scrapecoder commented Mar 10, 2021 •

edited

Loading

dclark27 commented Apr 1, 2021

akhilaravind commented May 27, 2021

akalana commented Dec 2, 2022

consciousnessdev commented Dec 3, 2023 •

edited

Loading

Create dynamic validation schema. #559

Create dynamic validation schema. #559

Comments

vijayranghar commented Jun 23, 2019 • edited Loading

akmjenkins commented Jun 23, 2019

vijayranghar commented Aug 7, 2019 • edited Loading

ybv commented Aug 20, 2019

bishoymelek-zz commented Sep 15, 2019

Shaker-Hamdi commented Sep 19, 2019

Shaker-Hamdi commented Sep 19, 2019 • edited Loading

vijayranghar commented Oct 2, 2019

saurabhnemade commented Dec 21, 2019

CodeSchneider commented Jan 2, 2020

ljhyeok commented Mar 17, 2020

lookfirst commented Mar 25, 2020 • edited Loading

ritchieanesco commented Apr 2, 2020

lookfirst commented Apr 2, 2020

ritchieanesco commented Apr 2, 2020 • edited Loading

lookfirst commented Apr 2, 2020

akhilaravind commented Apr 26, 2020

thealexandrelara commented May 16, 2020

gmonte commented Aug 28, 2020 • edited Loading

Cuantico commented Sep 8, 2020

Waqqars987 commented Nov 6, 2020 • edited Loading

developdeez commented Jan 6, 2021 • edited Loading

Waqqars987 commented Jan 6, 2021

developdeez commented Jan 6, 2021

WaqqarSuleman commented Jan 7, 2021

WaqqarSuleman commented Jan 7, 2021

scrapecoder commented Mar 10, 2021 • edited Loading

dclark27 commented Apr 1, 2021

akhilaravind commented May 27, 2021

akalana commented Dec 2, 2022

consciousnessdev commented Dec 3, 2023 • edited Loading

vijayranghar commented Jun 23, 2019 •

edited

Loading

vijayranghar commented Aug 7, 2019 •

edited

Loading

Shaker-Hamdi commented Sep 19, 2019 •

edited

Loading

lookfirst commented Mar 25, 2020 •

edited

Loading

ritchieanesco commented Apr 2, 2020 •

edited

Loading

gmonte commented Aug 28, 2020 •

edited

Loading

Waqqars987 commented Nov 6, 2020 •

edited

Loading

developdeez commented Jan 6, 2021 •

edited

Loading

scrapecoder commented Mar 10, 2021 •

edited

Loading

consciousnessdev commented Dec 3, 2023 •

edited

Loading