react-hook-form: How to force lowercase characters

I want to accept a username that only consists of lowercase characters

Solution:

watch('field') to listen to changes

8 Replies

Neto•10mo ago

GitHub

Neto•10mo ago

const myString = z.string().refine((val) => val === val.toLowerCase(), {
  message: "..."
});

const myString = z.string().refine((val) => val === val.toLowerCase(), {
  message: "..."
});

hi, thank you, but wouldn't it be nicer if every character you type into the input is automatically the lowercase version?

Neto•10mo ago

also works, i was just giving a solution you can use rhf with watch, a effect, getValue, and setValue

ohh that's nice thank you

Solution

Neto•10mo ago

watch('field') to listen to changes

Neto•10mo ago

in a effect to run getValue to get the current value setValue as the value with lowercase stuff

thank you, I will try it out