menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React Hook Form

๐Ÿ“‹ Custom React hooks for form validation without the hassle

Channels
Team

React-Hook-Form watercooler

July 31, 2019 at 1:06am
Show previous messages

October 11, 2019 at 11:12am
Can I imitate that behavior in react-hook-form? If I use 'onBlur' the user need to lose the focus on all fields to run the final validation enabling the button or showing all errors - that's not good from UX point of view.
Oh, there is PR for that case :)

October 19, 2019 at 8:22am
Quick question, If i had to get the watch value as object of object or array, how do i do that? What I mean, if i have few input checkboxes named as name="group1.new1" name="group1.new2" name="group2.new1" name="group2.new2" and I want the watch to give me back the object as group1: {new1: true, new2: false} etc. I think I saw a documentation or an example about it but I can't find it at the moment. So I am stuck :( Help me ASAP?

October 19, 2019 at 9:48pm
can you try to use watch('group2')

October 24, 2019 at 8:52pm
Quick question: What's the difference between getValues() and watch() ? Is there a reason to use one over the other?
Edited
(apart from the fact that you can specify which field you want with watch)
Edited
getValues() is cheap
because it doesn't subscribe to the input
watch() is when you want to watching some input all the time
๐Ÿ‘€
So for example you'd use getValues() in a callback and watch() to decide what to render?
correct :)
i should include that in the docs
will do
like-fill
1

October 28, 2019 at 2:15am
Hi all, when I have multiple validations, for example minLength on an optional field, how do I achieve this with the in-built validation function? I need minLength to validate only if the field isn't empty.
check out the validate function
at the bottom of the talbe
you can have multiple validation rules attached to your input
Thank you Bill
like-fill
1
my pleasure :)

October 31, 2019 at 9:36pm
It seems like we can only have one type of validation in rule per field. For example, I can only use one pattern rule. What if I have two patterns to validate (this is important when I need to switch rules applied conditionally). Is there a way to provide an array of validation rules?
Edited
Is passing an object in validate does not work for you?
<input
name="test"
ref={
register({
validate: {
smallCasePattern: value => /[a-z]+/.test(value),
digitPattern: value => /[0-9]{2}/.test(value)
}
})
}
/>
Edited
like-fill
1
thanks i think you miss the valdiate
like-fill
1
Show more messages