Search code examples
javascriptreactjsnext.jsformikyup

Yup validation doesn't work when use not(!) in matches function

I have a project with React and next js. I use formik for handling my forms and Yup for validations I have an input and I want perform some validations on it.

  1. this field must be required so if user don't enter any information I show this message => Required
  2. this field should not contain any numbers otherwise I Show this message => Wrongggg
  3. this field must only contain Persian characters otherwise I Show this message => only Persian chars

this is my schema

 Yup.string()
            .required("Requiredddd")
            .matches(!/\d/, 'Wrongggg'),
            .matches(/^[\u0600-\u06FF\s]+$/, 'Only persian chars')

But in this case condition number 2 always Considered wrong.i think (!/\d/) is wrong but I haven't any idea how can use matches function Negatively

Solution

  • According to yup you can use .matches using this shape: string.matches(regex: Regex, message?: string | function): Schema. If you want to validate that the string doesn't contain numbers, instead of using (!/\d/) you should use /\D+$/.

     Yup.string()
            .required("Requiredddd")
            .matches(/\D+$/, 'Wrongggg')
            .matches(/^[\u0600-\u06FF\s]+$/, 'Only persian chars')

    See working example