menu

React Hook Form

📋 Custom React hooks for form validation without the hassle

Channels
Team
Posts
Members
Info

Validate a field only if has been touched, or if a input is dirty?

I have one field that requires a correct email pattern, thing is this field is optional and I don't want to validate it unless I has been touch or even better, actually contains something. How would I go about that. I'm currently calling trigger triggerValidation on a Next…

thumbsup
0
message-simple
5

Resetting isValid

I'm working on a project where a switch case handles which part of the form is visible with next and previous button to move forward or backward. My problem is I need the next button to validate the inputs of each section before moving on. The first section works fine, but the…

thumbsup
0
message-simple
9

Why not fail early when validating many conditions?

If I use a custom validate object instead of a function with several keys as described in the docs I get an error with the type field corresponding to the last key of a validation spec object. But I can log that all of the functions of that spec were invoked and the validation…

thumbsup
0
message-simple
5

Best way to register/unregister conditional form fields

I have a select field that determines which other conditional fields get shown. Some of those fields are from Material UI and don't give me access to the ref so I need to use the setValue() method. Therefore I need to register them manually in the useEffect() call. The problem…

thumbsup
0
message-simple
136

How do you remove an item from a FieldArray

I followed the tutorial on creating FieldsArrays. The CodeSandbox works to add the element. However, there is no button on the CodeSandbox to remove a user once it has been added. Below is the method that I tried to remove a FieldArray element in my own code (not from the…

thumbsup
0
message-simple
49

Dropdown dependent on previous drop-down selection

1) I have a requirement of 3 drop-downs that are dependent on each other. So imagine first drop down is called "snack type" and has a choice of "fruit", "veg", "other" (prompt on the drop-down/first choice is "please select"). User selects "veg" and second drop down called…

thumbsup
0
message-simple
43

Add a custom message to validate

For now, I only managed to add a custom message to the built-in validation functions, such as: maxLength: { value: 6, message: "Nickname can't be longer that 6 characters" } However, it would be nice to add the same thing to the validate function, something like …

thumbsup
0
message-simple
14

React-Hook-Form + floating labels

Hi, is there maybe an example how to realize floating labels with rect-hook-form?

thumbsup
0
message-simple
11

Watching an input with an onChange masking/normalizing

My form contains two inputs. The second input is controlled and readonly and uses the watched value of the first input. The first input has an onChange normalization function attached and is normalized (doing some math). The problem is that the second input gets the unnormalized…

thumbsup
0
message-simple
4

How to check if a field has been validated when no errors?

I'm trying to add a .success className for those inputs that are successfully validated and .error when there is an error. But the problem is that it's not a binary thing. The third default state is when the field has not been validated. For example with the onBlur validation…

thumbsup
0
message-simple
4