yup formik validation keeps changing from valid to invalid

Question

I'm using

fullName: Yup.string()
  .max(50, "Must be 50 characters or less")
  .required("Full Name Required")
  .matches(/\s+(?=[a-z])/gi, "Full Name Required")`

To make sure that the user inputs their full name into the 1st text field.

The Regex appears to be working fine as it only says that the input is invalid if the first set of characters input is not followed by a space and another lot of characters.

The only problem is that when I click away from them the text field, I get an error "full name required" then I click back to the text field and click away again, the error goes away. Each time I click on another text field the first text field errors "full name required" even though the input is actually valid.

it seems that formik validation is running on input OnChange, onTouched,OnBlur.

I have attached a short video to show exactly what is happening. I would really appreciate any help

@Toto it should as its not giving me an error, it only gives an error if some one puts in an input longer then 50 characters — Andrew Irwin, Feb 11 '20 at 17:49

score 0 · Answer 1 · answered Feb 12 '20 at 10:55

I found the issue.

the /g at the end of the regex expression /\s+(?=[a-z])/gi appeared to be causing the problem as after removing it everything worked fine.

"The g modifier is used to perform a global match (find all matches rather than stopping after the first match)." RegExp g Modifier W3Schools Definition

yup formik validation keeps changing from valid to invalid

1 Answers1