Yup schema: How to add new line in error message

Admin 1
Viewed 782
matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters, At least one (1) uppercase, one (1) lowercase, one (1) Number and one special case character`
)

and

matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters,\n At least one (1) uppercase, one (1) lowercase, one (1) Number\n and one special case character`
)

How do I set a new line on the matches error message?

cause I already tried the \n and <br/> but it doesn't work.

What I'm trying to do is like this:

Must contain 8 characters,
At least one (1) uppercase, one (1) lowercase, one (1) Number 
and one special case character

the output should be like this ^

but on my side instead it will set it new line. the output is like this:

Must contain 8 characters, At least one (1) uppercase, one (1) lowercase, one (1) Number and one special case character

it doesn't change anything.

yup react-hook-form typescript reactjs javascript
1 Answers

Setting white-space: pre-wrap will make the lines broken at new line characters or <br/>:

.matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters,\n At least one (1) uppercase, one (1) lowercase, one (1) Number\n and one special case character`
),

{errors.firstName && (
  <div style={{ color: "red", whiteSpace: "pre-wrap" }}>
    {errors.firstName.message}
  </div>
)}

Live Demo

Edit 66730451/how-to-set-new-line-on-matches

user_94494260
Related