How to use yup - 10 common examples
To help you get started, we’ve selected a few yup examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / yup / yup-tests.ts View on Github 
this.createError();
return true;
};
mixed.test('with-context', 'it uses function context', testContext);
mixed.test({
test: testContext,
});
mixed.test({
message: ({ passed }) => (passed ? 'You passed' : 'You failed'),
name: 'checkParams',
params: { passed: true },
test: value => !!value,
});
// mixed with concat
yup.object({ name: yup.string() }).concat(yup.object({ when: yup.date() })); // $ExpectType ObjectSchema<{ name: string; } & { when: Date; }>
yup.mixed().concat(yup.date()); // $ExpectType MixedSchema
// Async ValidationError
const asyncValidationErrorTest = (includeParams: boolean) =>
function(this: TestContext): Promise {
return new Promise(resolve =>
resolve(
includeParams
? this.createError({ path: 'testPath', message: 'testMessage', params: { foo: 'bar' } })
: this.createError(),
),
);
};
mixed.test('async-validation-error', 'Returns async ValidationError', asyncValidationErrorTest(true));
mixed.test('async-validation-error', 'Returns async ValidationError', asyncValidationErrorTest(false));numSchema.lessThan(5, () => 'lt');
numSchema.moreThan(5);
numSchema.moreThan(5, 'mt');
numSchema.moreThan(5, () => 'mt');
numSchema.integer();
numSchema.integer('int');
numSchema.integer(() => 'int');
numSchema.truncate();
numSchema.round('floor');
numSchema
.validate(5, { strict: true })
.then(value => value)
.catch(err => err);
// Boolean Schema
const boolSchema = yup.boolean();
boolSchema.isValid(true); // => true
// Date Schema
const dateSchema = yup.date();
dateSchema.isValid(new Date()); // => true
dateSchema.min(new Date());
dateSchema.min('2017-11-12');
dateSchema.min(new Date(), 'message');
dateSchema.min('2017-11-12', 'message');
dateSchema.min('2017-11-12', () => 'message');
dateSchema.max(new Date());
dateSchema.max('2017-11-12');
dateSchema.max(new Date(), 'message');
dateSchema.max('2017-11-12', 'message');
dateSchema.max('2017-11-12', () => 'message');path: 'path',
errors: ['error'],
inner: [new yup.ValidationError('error', true, 'path')],
type: 'date',
value: { start: '2017-11-10' },
};
error.value = 'value';
error.value = true;
error.value = 5;
error.value = { name: 'value' };
error.type = {};
error.type = [];
error.errors = ['error'];
// mixed
let mixed: MixedSchema = yup.mixed();
mixed.clone();
mixed.label('label');
mixed.meta({ meta: 'value' });
mixed.describe().label;
mixed.describe().meta;
mixed.describe().tests;
mixed.describe().type;
mixed.concat(yup.string());
mixed.validate({});
mixed.validate({ hello: 'world' }, { strict: true }).then(value => value);
mixed.validateSync({ hello: 'world' }, { strict: true });
mixed.validateAt('path', {}, { strict: true, context: {} });
mixed.validateAt('path', {}, { strict: true, context: {} }).then(value => value);
mixed.validateSyncAt('path', {}, { strict: true, context: {} });
mixed.isValid(undefined, (valid: true) => true);
mixed.isValid({ hello: 'world' }).then(valid => valid);// reach function
const schema1 = yup.object().shape({
nested: yup.object().shape({
arr: yup.array().of(yup.object().shape({ num: yup.number().max(4) })),
}),
});
reach(schema1, 'nested.arr.num');
reach(schema1, 'nested.arr[].num');
// isSchema function
const isSchemaResult1: boolean = isSchema(schema1);
const isSchemaResult2: boolean = isSchema({});
// addMethod function
yup.addMethod(yup.number, 'minimum', function(this, minValue: number, message: string) {
return this.min(minValue, message);
});
yup.addMethod(yup.date, 'newMethod', function(this: yup.DateSchema, date: Date, message?: string) {
return this.max(date, message);
});
// ref function
const schema2 = yup.object().shape({
baz: yup.ref('foo.bar'),
foo: yup.object().shape({
bar: yup.string(),
}),
x: yup.ref('$x'),
});
let ref: yup.Ref = yup.ref('foo.bar');ValidationError.formatError('error');
ValidationError.formatError(() => 'error');
ValidationError.formatError(() => 'error', { path: 'path' });
// ValidationError
let error: ValidationError = new yup.ValidationError('error', 'value', 'path');
error = new yup.ValidationError(['error', 'error2'], true, 'path');
error = new yup.ValidationError(['error', 'error2'], 5, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path', 'type');
error = {
name: 'ValidationError',
message: 'error',
path: 'path',
errors: ['error'],
inner: [new yup.ValidationError('error', true, 'path')],
type: 'date',
value: { start: '2017-11-10' },
};
error.value = 'value';
error.value = true;
error.value = 5;
error.value = { name: 'value' };
error.type = {};
error.type = [];
error.errors = ['error'];
// mixed
let mixed: MixedSchema = yup.mixed();
mixed.clone();
mixed.label('label');
mixed.meta({ meta: 'value' });const renderables = yup.array().of(renderable);
// ValidationError static methods
// $ExpectType boolean
ValidationError.isError(new ValidationError('error', 'value', 'path'));
// $ExpectType string | ((params?: any) => string)
ValidationError.formatError('error', { path: 'path' });
ValidationError.formatError('error');
ValidationError.formatError(() => 'error');
ValidationError.formatError(() => 'error', { path: 'path' });
// ValidationError
let error: ValidationError = new yup.ValidationError('error', 'value', 'path');
error = new yup.ValidationError(['error', 'error2'], true, 'path');
error = new yup.ValidationError(['error', 'error2'], 5, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path', 'type');
error = {
name: 'ValidationError',
message: 'error',
path: 'path',
errors: ['error'],
inner: [new yup.ValidationError('error', true, 'path')],
type: 'date',
value: { start: '2017-11-10' },
};
error.value = 'value';
error.value = true;
error.value = 5;
error.value = { name: 'value' };
error.type = {};
error.type = [];});
const renderable = yup.lazy(value => {
switch (typeof value) {
case 'number':
return yup.number();
case 'string':
return yup.string();
default:
return yup.mixed();
}
});
const renderables = yup.array().of(renderable);
// ValidationError static methods
// $ExpectType boolean
ValidationError.isError(new ValidationError('error', 'value', 'path'));
// $ExpectType string | ((params?: any) => string)
ValidationError.formatError('error', { path: 'path' });
ValidationError.formatError('error');
ValidationError.formatError(() => 'error');
ValidationError.formatError(() => 'error', { path: 'path' });
// ValidationError
let error: ValidationError = new yup.ValidationError('error', 'value', 'path');
error = new yup.ValidationError(['error', 'error2'], true, 'path');
error = new yup.ValidationError(['error', 'error2'], 5, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path', 'type');
error = {
name: 'ValidationError',
message: 'error',
path: 'path',});
const renderables = yup.array().of(renderable);
// ValidationError static methods
// $ExpectType boolean
ValidationError.isError(new ValidationError('error', 'value', 'path'));
// $ExpectType string | ((params?: any) => string)
ValidationError.formatError('error', { path: 'path' });
ValidationError.formatError('error');
ValidationError.formatError(() => 'error');
ValidationError.formatError(() => 'error', { path: 'path' });
// ValidationError
let error: ValidationError = new yup.ValidationError('error', 'value', 'path');
error = new yup.ValidationError(['error', 'error2'], true, 'path');
error = new yup.ValidationError(['error', 'error2'], 5, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path');
error = new yup.ValidationError(['error', 'error2'], { name: 'value' }, 'path', 'type');
error = {
name: 'ValidationError',
message: 'error',
path: 'path',
errors: ['error'],
inner: [new yup.ValidationError('error', true, 'path')],
type: 'date',
value: { start: '2017-11-10' },
};
error.value = 'value';
error.value = true;
error.value = 5;
error.value = { name: 'value' };
error.type = {};SchemaDescription,
TestOptions,
ValidateOptions,
NumberSchema,
TestContext,
LocaleObject,
} from 'yup';
// reach function
const schema1 = yup.object().shape({
nested: yup.object().shape({
arr: yup.array().of(yup.object().shape({ num: yup.number().max(4) })),
}),
});
reach(schema1, 'nested.arr.num');
reach(schema1, 'nested.arr[].num');
// isSchema function
const isSchemaResult1: boolean = isSchema(schema1);
const isSchemaResult2: boolean = isSchema({});
// addMethod function
yup.addMethod(yup.number, 'minimum', function(this, minValue: number, message: string) {
return this.min(minValue, message);
});
yup.addMethod(yup.date, 'newMethod', function(this: yup.DateSchema, date: Date, message?: string) {
return this.max(date, message);
});
// ref function
const schema2 = yup.object().shape({
baz: yup.ref('foo.bar'),MixedSchema,
SchemaDescription,
TestOptions,
ValidateOptions,
NumberSchema,
TestContext,
LocaleObject,
} from 'yup';
// reach function
const schema1 = yup.object().shape({
nested: yup.object().shape({
arr: yup.array().of(yup.object().shape({ num: yup.number().max(4) })),
}),
});
reach(schema1, 'nested.arr.num');
reach(schema1, 'nested.arr[].num');
// isSchema function
const isSchemaResult1: boolean = isSchema(schema1);
const isSchemaResult2: boolean = isSchema({});
// addMethod function
yup.addMethod(yup.number, 'minimum', function(this, minValue: number, message: string) {
return this.min(minValue, message);
});
yup.addMethod(yup.date, 'newMethod', function(this: yup.DateSchema, date: Date, message?: string) {
return this.max(date, message);
});
// ref function
const schema2 = yup.object().shape({
