yup#object TypeScript Examples

validationSchema = object({
  bankName: string().min(5, "Must contain at least 5 characters").required("Enter a bank name"),
  routingNumber: string()
    .length(9, "Must contain a valid routing number")
    .required("Enter a valid bank routing number"),
  accountNumber: string()
    .min(9, "Must contain at least 9 digits")
    .max(12, "Must contain no more than 12 digits")
    .required("Enter a valid bank account number"),
})

validationSchema = object({
  firstName: string().required("First Name is required"),
  lastName: string().required("Last Name is required"),
  username: string().required("Username is required"),
  password: string()
    .min(4, "Password must contain at least 4 characters")
    .required("Enter your password"),
  confirmPassword: string()
    .required("Confirm your password")
    .oneOf([ref("password")], "Password does not match"),
})

responseBodySchema = object({
	type: mixed<'Original' | ResponseBodyType>().oneOf(['Original', ...responseBodyTypesList]),
	textValue: string().when('type', {
		is: ResponseBodyType.Base64,
		then: string().matches(/^[A-Za-z0-9+/]*(={1,3})?$/, 'Invalid Base 64'),
		otherwise: string(),
	}),
	fileValue: mixed<File>().notRequired(),
})

validationSchema = object({
  firstName: string().required("Enter a first name"),
  lastName: string().required("Enter a last name"),
  email: string().email("Must contain a valid email address").required("Enter an email address"),
  phoneNumber: string()
    .matches(phoneRegExp, "Phone number is not valid")
    .required("Enter a phone number"),
  defaultPrivacyLevel: mixed<DefaultPrivacyLevel>().oneOf(DefaultPrivacyLevelValues),
})

requestBodySchema = object({
	type: mixed<'Original' | RequestBodyType>().oneOf(['Original', ...requestBodyTypesList]),
	textValue: string(),
	formValue: array().of(
		object({
			key: string().when('value', {
				is(value) {
					return !value;
				},
				then: string(),
				otherwise: string().required('Key is required when the value is not empty'),
			}),
			value: string(),
		}),
	),
})

headersSchema = array().of(
	object({
		name: string().when('value', {
			is(value) {
				return !value;
			},
			then: string(),
			otherwise: string().required('Name is required when the value is not empty'),
		}),
		value: string(),
	}),
)

validationSchema: SchemaOf<Omit<CustomerAddressInput, 'overwrite'>> = object({
  address1: string().label('Street address').max(100).required(),
  address2: string().min(0).max(254).nullable(),
  city: string().label('City').max(25).required(),
  company: string().label('Company').min(0).max(35).nullable(),
  country: mixed().label('Country').oneOf(Object.values(CountriesEnum)).required(),
  email: string().label('Email').email().min(11).max(254).required(),
  firstName: string().label('First name').max(35).required(),
  lastName: string().label('Last name').max(35).required(),
  phone: string().label('Phone number').min(10).max(15).required(),
  postcode: string().label('Postcode').min(2).max(9).required(),
  state: string().label('State').min(0).max(254).nullable(),
})

validationSchema: SchemaOf<Omit<CustomerAddressInput, 'email' | 'overwrite' | 'phone'>> =
  object({
    address1: string().label('Street address').max(100).required(),
    address2: string().min(0).max(254),
    city: string().label('City').max(25).required(),
    company: string().label('Company').min(0).max(35),
    country: mixed().label('Country').oneOf(Object.values(CountriesEnum)).required(),
    firstName: string().label('First name').max(35).required(),
    lastName: string().label('Last name').max(35).required(),
    postcode: string().label('Postcode').min(2).max(9).required(),
    state: string().label('State').min(0).max(254),
  })

variantNameFormSchema = object().shape({
  name: string()
    .required('Please add a name')
    .test(
      'uniqueName',
      'This name has already been used',
      (currentName, { options }) => {
        if (currentName === undefined) {
          return true
        }

        const {
          variantsForms,
          variantForm,
        } = options.context as VariantNameFormSchemaContext

        const sameVariantFormExists = variantsForms.some(
          ({ name, fieldId }) => {
            const haveSameNames =
              currentName.toLowerCase() === name.toLowerCase()
            return variantForm
              ? fieldId !== variantForm.fieldId && haveSameNames
              : haveSameNames
          }
        )

        return !sameVariantFormExists
      }
    ),
})

foodFormSchema = object().shape({
  name: string()
    .required('Please add a name')
    .test(
      'uniqueName',
      'This name has already been used',
      (currentName, { options }) => {
        if (currentName === undefined) {
          return true
        }

        const { allFoods, food } = options.context as FoodFormSchemaContext

        const sameFoodExists = allFoods.some(({ name, id }) => {
          const haveSameNames = currentName.toLowerCase() === name.toLowerCase()
          return food ? id !== food.id && haveSameNames : haveSameNames
        })

        return !sameFoodExists
      }
    ),
  categoryId: number()
    .notOneOf([0], 'Please select category')
    .typeError('Please select category'),
  energy: string().required('Please enter energy'),
  servingSizeInGrams: string().required('Please enter a value'),
})

applicationSchema = object({
	studentId: string().length(10).required("SLIIT ID is required"),
	name: string().required("Name is required"),
	email: string().required("Email is required").email("Email is not valid"),
	contactNumber: string()
		.required("Phone number is required")
		.min(10)
		.max(10)
		.matches(contactNumberRegEx, "Invalid phone number"),
	currentAcademicYear: string().required("Academic year is required"),
	selfIntroduction: string().required("Self introduction is required"),
	reasonForJoin: string().required("Reason for join is required"),
	linkedIn: string().required("LinkedIn profile is required").matches(webURLRegEx, "Invalid link"),
	gitHub: string().required("GitHub profile is required").matches(webURLRegEx, "Invalid link"),
	blog: string().matches(webURLRegEx, "Invalid link"),
	experiences: string().max(1500, "Character count exceed: (Maximum: 1500)"),
	challenges: string().max(1500, "Character count exceed: (Maximum: 1500)"),
	goal: string().required("Goal is required"),
	skillsAndTalents: array().of(string()),
	pastWork: string().max(1500, "Character count exceed: (Maximum: 1500)"),
})

Schema = object().shape({
  metaValues: object().shape({
    init_input: string(),
    init_output: string(),
    async_init_input: string(),
    async_init_output: string(),
    handle_input: string(),
    handle_output: string(),
    async_handle_input: string(),
    async_handle_output: string(),
    meta_state_input: string(),
    meta_state_output: string(),
    types: string(),
  }),
  programValues: object().shape({
    value: number().required('This field is required').min(0, 'Initial value should be more or equal than 0'),
    payload: payloadSchema,
    gasLimit: number().min(0, 'Initial value should be more than 0'),
    programName: string().max(50, 'Name value should be less than 50'),
  }),
})

validationSchema = object({
  content: string(),
})

ruleFormSchema = object({
	label: string().notRequired(),
	filter: object({
		url: string(),
		resourceTypes: array().of(mixed<ResourceType>().oneOf(resourceTypesList)),
		methods: array().of(mixed<RequestMethod>().oneOf(requestMethodsList)),
	}),
	actionType: mixed<RuleActionsType>().oneOf(ruleActionsTypesList),
	actionConfigs: object({
		[RuleActionsType.Breakpoint]: object({
			stage: mixed<BreakpointStage>()
				.oneOf(breakpointStagesList)
				.default(BreakpointStage.Both),
		}),
		[RuleActionsType.Mutation]: object({
			request: object({
				endpoint: string().matches(
					/^((https?:)|(\[protocol]))\/\/.+/,
					'The endpoint url should be started with a protocol (or suitable macros) and have a hostname',
				),
				method: mixed<RequestMethod>()
					.oneOf(requestMethodsList)
					.notRequired(),
				setHeaders: headersSchema,
				dropHeaders: array().of(string()),
				body: requestBodySchema,
			}),
			response: object({
				statusCode: statusCodeSchema.notRequired(),
				setHeaders: headersSchema,
				dropHeaders: array().of(string()),
				body: responseBodySchema,
			}),
		}).required(),
		[RuleActionsType.LocalResponse]: object({
			statusCode: statusCodeSchema.required('Status code is required'),
			headers: headersSchema,
			body: responseBodySchema,
		}),
		[RuleActionsType.Failure]: object({
			reason: mixed<ResponseErrorReason>().oneOf(responseErrorReasonsList),
		}),
	}).required(),
}).required()

notesFormSchema = object().shape({
  name: string(),
})

/**
 * 创建MetaForm的Schema
 *
 *
 */
export function createMetaFormSchema(fieldMap: ObjectShape) {
  return object().shape(fieldMap);
}

payloadSchema = lazy((value) => {
  if (typeof value === 'object') {
    return object();
  }

  return string().required('This field is required');
})

export default function Home() {
  return (
    <Card>
      <CardContent>
        <FormikStepper
          initialValues={{
            firstName: '',
            lastName: '',
            millionaire: false,
            money: 0,
            description: '',
          }}
          onSubmit={async (values) => {
            await sleep(3000);
            console.log('values', values);
          }}
        >
          <FormikStep label="Personal Data">
            <Box paddingBottom={2}>
              <Field fullWidth name="firstName" component={TextField} label="First Name" />
            </Box>
            <Box paddingBottom={2}>
              <Field fullWidth name="lastName" component={TextField} label="Last Name" />
            </Box>
            <Box paddingBottom={2}>
              <Field
                name="millionaire"
                type="checkbox"
                component={CheckboxWithLabel}
                Label={{ label: 'I am a millionaire' }}
              />
            </Box>
          </FormikStep>
          <FormikStep
            label="Bank Accounts"
            validationSchema={object({
              money: mixed().when('millionaire', {
                is: true,
                then: number()
                  .required()
                  .min(
                    1_000_000,
                    'Because you said you are a millionaire you need to have 1 million'
                  ),
                otherwise: number().required(),
              }),
            })}
          >
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="money"
                type="number"
                component={TextField}
                label="All the money I have"
              />
            </Box>
          </FormikStep>
          <FormikStep label="More Info">
            <Box paddingBottom={2}>
              <Field fullWidth name="description" component={TextField} label="Description" />
            </Box>
          </FormikStep>
        </FormikStepper>
      </CardContent>
    </Card>
  );
}

validationSchema: SchemaOf<RegisterFormData> = object({
  email: string().label('Email').email().min(11).max(254).required(),
  password: string().label('Password').min(8).max(35).required(),
  username: string().label('Username').max(35).required(),
})

validationSchema: SchemaOf<ContactFormData> = object({
  acceptance: boolean().isTrue().required(),
  email: string().label('Email').email().min(11).max(254).required(),
  name: string().label('Name').max(70).required(),
  message: string().label('Message').required(),
  phone: string().label('Phone number').max(15).nullable(),
  subject: string().label('Subject').max(254).nullable(),
})

validationSchema: SchemaOf<LoginMutationVariables> = object({
  password: string().label('Password').min(8).max(35).required(),
  username: string().label('Username').max(35).required(),
})

CreateGitFormSchema = object().shape({
  name: string()
    .min(2, "Git repository name require minimum of 2 characters")
    .required("Repository name is missing"),
  public: bool().required("Must select if repo is public"),
})

validationSchema = object({
  amount: number().required("Please enter a valid amount"),
  description: string().required("Please enter a note"),
  senderId: string(),
  receiverId: string(),
})

validationSchema = object({
  username: string().required("Username is required"),
  password: string()
    .min(4, "Password must contain at least 4 characters")
    .required("Enter your password"),
})

export default function Home() {
  return (
    <Card>
      <CardContent>
        <FormikStepper
          initialValues={{
            firstName: "",
            lastName: "",
            millionaire: false,
            money: 0,
            description: ""
          }}
          onSubmit={async values => {
            await sleep(3000);
            console.log("values", values);
          }}
        >
          <FormikStep label="Personal Data">
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="firstName"
                component={TextField}
                label="First Name"
              />
            </Box>
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="lastName"
                component={TextField}
                label="Last Name"
              />
            </Box>
            <Box paddingBottom={2}>
              <Field
                name="millionaire"
                type="checkbox"
                component={CheckboxWithLabel}
                Label={{ label: "I am a millionaire" }}
              />
            </Box>
          </FormikStep>
          <FormikStep
            label="Bank Accounts"
            validationSchema={object({
              money: mixed().when("millionaire", {
                is: true,
                then: number()
                  .required()
                  .min(
                    1_000_000,
                    "Because you said you are a millionaire you need to have 1 million"
                  ),
                otherwise: number().required()
              })
            })}
          >
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="money"
                type="number"
                component={TextField}
                label="All the money I have"
              />
            </Box>
          </FormikStep>
          <FormikStep label="More Info">
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="description"
                component={TextField}
                label="Description"
              />
            </Box>
          </FormikStep>
        </FormikStepper>
      </CardContent>
    </Card>
  );
}