You need to pass an actual RegExp object to matches, not a string. Just replace the double quotes with forward slashes in your password schema: EDIT: Updated to use regex from @Bren password: yup .string() .required(‘Please Enter your password’) .matches( /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/, “Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case … Read more
You have to pass true to nullable – nrOfApples: yup.number().min(0).max(999).nullable(true); From: https://github.com/jquense/yup/issues/500 Working example: https://runkit.com/xdumaine/5f2816c75a0ba5001aa312b2 Note that if you add required().nullable(true) the required overrides the nullable and null will not validate. Update: You can use a transform to convert the NaN value into null. I updated the runkit with this: const contactSchema = yup.object({ name: … Read more
You can also pass a shape to the object constructor as a convenience. yupobject documentation Basically passing the schema to shape is just the long-form of passing it to the object constructor. Shape does however offer the benefit of chaining and overloading definitions in later chained methods. See yup.shape documentation
Here is how I did it import { object, string, mixed } from “yup” const schema = object().shape({ attachment: mixed().test(“fileSize”, “The file is too large”, (value) => { if (!value.length) return true // attachment is optional return value[0].size <= 2000000 }), })
Just to elaborate on efleurine’s answer. You do not need to store each validation on the same field – you can chain them to get a full validation. password: Yup.string() .required(‘No password provided.’) .min(8, ‘Password is too short – should be 8 chars minimum.’) .matches(/[a-zA-Z]/, ‘Password can only contain Latin letters.’) Note how you still … Read more
You should use typeError Here is an example from my code: amount: Yup.number() .typeError(‘Amount must be a number’) .required(“Please provide plan cost.”) .min(0, “Too little”) .max(5000, ‘Very costly!’)
Your regex should cover your whole string, by using ^ and $ to signify start and end of string: /^[abcdefghijklmnopqrstuvwxyz]+$/ Otherwise, it will match part of your string, which is why it matches when you have a mix of good and bad characters, but fails when every character is bad. You can shorten the regex … Read more
const validationSchema = Yup.object().shape({ username: Yup.string() .test(‘checkDuplUsername’, ‘same name exists’, function (value) { return new Promise((resolve, reject) => { kn.http({ url: `/v1/users/${value}`, method: ‘head’, }).then(() => { // exists resolve(false) }).catch(() => { // note exists resolve(true) }) }) }) }) Yup provides asynchronous processing through the test method. (kn is my ajax promise function) … Read more
I solved it using compact() (filtering out falsely values) together with setTimeout after the FieldArray modifier function: const validationSchema = Yup.object().shape({ subject: Yup.string().required(i18n.t(‘required-field’)), description: Yup.string(), daysOfWeek: Yup.array() .of( Yup.object().shape({ dayOfWeek: Yup.string(), checked: Yup.boolean(), }) ) .compact((v) => !v.checked) .required(i18n.t(‘required-field’)), taskSchedules: Yup.array(), }); And in form: <Checkbox value={day.dayOfWeek} checked={day.checked} onChange={(e) => { replace(idx, { …day, checked: … Read more
If you want to keep the submit button disabled initially when the form loads, you can use the use the dirty : boolean property of Formik something as below: disabled={!formik.dirty} If you want to keep the submit button disabled until all the field values are valid then you can use isValid: boolean which works as … Read more