Questions tagged [react-hook-form]
React form library using hooks
2,365
questions
-1
votes
0
answers
41
views
MUI DatePicker behaviour issues with React Hook Form [closed]
https://codesandbox.io/p/sandbox/react-typescript-forked-ghfxmm?file=%2Fsrc%2FApp.tsx%3A56%2C40
Could someone please pretty please help me understand why:
The DatePicker defaults to error state if no ...
0
votes
0
answers
13
views
Fetching and setting a hidden default value for ReactHookForm with ReactQuery and Zod validation
I have a form using the ReactHookForm, ReactQuery and Zod for validation. I want to associate the current user with the form, so when they submit the record in the DB is associated with them. This is ...
0
votes
1
answer
66
views
Conditional validation react hook form and zod
I'm creating multi-step form in React and using React Hook Form and Zod for validation.
To keep it simple, lets assume that I have only two steps and three fields.
Step one:
Select with two options - ...
0
votes
0
answers
23
views
How to correctly implement a Tags Input Field with React hook form?
So I have created a Tags input field for my Next.js app and I want to plug it into the react-hook-form. However, The field returns a string instead of an array.
Here's how I am registering the input ...
0
votes
0
answers
23
views
Check for uniqueness on mongodb database before submitting react hook form
I would like to implement a way to check if the value of a react hook form input is unique on my database before allowing the user submitting the form.
Currently im using zod for validating the form ...
1
vote
0
answers
26
views
Type inference between two generics with a union
I have the following type for a react component using react-hook-form
import {
type FieldPath,
type FieldValues,
type FieldPathValue,
} from "react-hook-form";
interface ...
0
votes
0
answers
31
views
Custom React Component using Autocomplete with React-Hook-Form
Trying to create a custom component that uses the Material UI Autocomplete component for a form and running into endless loops or inconsistent states where I am trying to update some parent data for ...
0
votes
0
answers
38
views
how to remove Required * in helper text in date picker in mui
I'm new to react and Mui I was working with validating a form in react with react-hook-form.
in DatePicker helperText field I need to remove required * when user saves
when I input date how can I ...
1
vote
2
answers
40
views
react-hook-form not working when onsubmit
Upon clicking the SubmitBtn in the LoginForm component for the first time, the form fails to submit, and nothing appears to happen. The onInvalid function returns an empty object ({}). However, on the ...
0
votes
0
answers
25
views
React Hook Form Controller not working with Validate function
I'm trying to upload files using Controller in React Hook Form. Inside "rules", I have validate functions. However, it appears the validate funtions are not being called but their error ...
0
votes
0
answers
23
views
React Hook Forms control undefined value in form after failed submit
I'm using React Hook Form with React Select, but to style the React Select I made a wrapper component.
And what happens is that everything work fine until the form submits and the value of ...
1
vote
1
answer
40
views
Handle multiple forms with React Hook Form
In my React app, I have a 3-step sign-up process, and to handle forms, I am using React Hook Form. The Auth component renders a specific form depending on the route.
The Auth Component:
import { ...
0
votes
1
answer
11
views
Mailing do not work in deployment for a next.js project
MAILING WORKS ON DEVELOPMENT BUT NOT IN PRODUCTION/ DEPLOYEMENT to VERCEL
I've created a Tsx component for sending email in my Next.js application like so:
import React from "react";
import {...
0
votes
0
answers
33
views
React Form Validation Issue: Form State Not Reflecting Errors Set in Child Component within Parent Component
setting error at child Component Code Preview I'm currently facing an issue in a React project where I have a form implemented in a parent component and validation errors being handled in a child ...
0
votes
0
answers
19
views
How to integrate RadixUI Themes controls with react-hook-form register()?
There is not a single documented example in RadixUI documentation. I have tried logical path but values aren't updated on change. I want to use register() from react-hook-form and not Controller.
Are ...
0
votes
0
answers
24
views
React Hook form not submitting login credentials next auth
The problem here is that when i try to login with email and password,I dont see any request on the network in the browser.I tried the same pattern with server action of next js 14 .It works but it ...
0
votes
0
answers
13
views
React - form for edit entity from BD
I want to make a form for creating and editing an entity from the database.
And now I’m thinking about how best to do it.
1. I want filling out a form and SUBMIT it - than an entity is created in the ...
0
votes
0
answers
27
views
How to validate with Zod into a loop fields?
I'm currently facing an issue with my Astro/React web app. I'm building a form using ShadcnUI's form, which involves the integration of Zod and React Hook Form.
I initialize the form in a parent ...
1
vote
1
answer
25
views
handle validation on child component for the the form in the parent component the react-hook-form and usefieldarray
I'm new to react and i'm stuck in a situation. The application i'm currently working on has multiple sections say section 1 ,section 2, ... Each of these section have form which has different fields. ...
0
votes
0
answers
42
views
How to add a dynamic, server-fetched default value to a Zod-validated React Hook Form?
I have a React Hook form with validation and default values from Zod. I am using Supabase as my DB and Auth. How can I set the default value of userId to be current user's id? User state is inside the ...
0
votes
1
answer
28
views
Material UI issue with ISO 8601 date format
Server returns date as birthDate: "2023-11-10T05:00:00.000Z" ISO 8601 format. When trying to display this in MUI DatePicker using React-Hook_Form to replace the defaultValue, I am getting a ...
0
votes
0
answers
22
views
React Context declared outside of component is undefined
I'm working with react-hook-form, which implements a <Controller /> component that wraps around any <input /> for controlled fields.
I'm trying to use abstraction, so that I can make any ...
0
votes
0
answers
50
views
Nextjs react hook form submit not working
I use nextjs react hook form and zod it works fine in register and login but when I tried to make profile settings and it's also work but when I decied to create switch between user register (...
0
votes
0
answers
25
views
unable to dynamically set a value in react-hook-form
I am using react-hook-form to build a form. there is a section of the form where the user can enter item name, item price, and the quantity of items. i also want an input where the user cannot ...
0
votes
0
answers
13
views
React-hook-form, react-tabs and yupResolver - TypeError: o[(intermediate value)(intermediate value)(intermediate value)] is not a function
I try to build a dynamic form with react-hook-form and yup by this cool guide:
https://dev.to/franklin030601/dynamic-forms-with-react-hook-form-2ml8
i have this structure of data:
export const tabs: ...
0
votes
1
answer
52
views
In Ionic/React, how do I display an error message when my form is submitted but also if input is touched using React hook forms?
I'm using Ionic 7, React 18, and REact hook forms v 7.48. I would like to validate my form upon submit, but also display error messages if the user touches the control and doesn't enter the input ...
1
vote
1
answer
30
views
Not able to set initial dates using react day picker and Next.js
I am using Next.js, React Query and React Day Picker with React Hook Form.
I am fetching some dates from an endpoint using React Query and I want to set these dates as the initial dates that are ...
0
votes
0
answers
55
views
How to improve form provider performance in React Hook Form
Since the react hook form provider is based on context Api, for large nested forms it can cause performance issues due to multiple re-renders during state updates. I came across this section in the ...
0
votes
0
answers
19
views
Dynamic Form validation in RectJS
I have a form setup with stepper in ChakraUI. I get input from user and map those fields to helloSign template. Now I have like 20 templates which will require different fields for each template.
for ...
0
votes
0
answers
42
views
Best approach to listen (watch) a field using react-hook-form
I would like to update the page state depending on a select field
Here is an example:
import React from 'react';
import { useForm, Controller, useWatch } from 'react-hook-form';
const MyForm = () =&...
0
votes
1
answer
18
views
Why is the error message not being displayed when the validation fails?
I am using react-hook-form and for the life of me can't seem to figure out what is wrong with the following implementation:
form.jsx
"use client";
import { useForm } from "react-hook-...
1
vote
1
answer
70
views
React hook form with Zod and Material ui is not showing any error
This is my ProductInfoForm made with Material UI, and react-hook-form with zod validations, but I have an issue: when I submit the data in the form, it shows the data in the console, but when I want ...
2
votes
0
answers
58
views
Unable to re-render REACT
I am a newbie to web-dev and learning React. I have used ZOD for form implementation. My IDE is not showing any errors but when I click on submit button, screen doesn't gets re-render. It would be ...
1
vote
0
answers
66
views
React Hook Form isSubmitSuccessful returning false on first submission
I am creating a form for my website using React Hook Form with EmailJS. I'm accessing the "isSubmitSuccessful" property to dynamically show a dialog popup (using the Headless UI dialog ...
0
votes
2
answers
18
views
Problem with react-hook-form not showing error until submit button is pressed
This is the sample code from official site of react-hook-form:
https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm?file=/src/index.tsx
As you can see if you try it, the error is not ...
1
vote
1
answer
28
views
Type error from setting defaultValues of react-hook-form's useForm to a generic value
Here's backbone example (You can also find this on this codesandbox)
import { FieldValues, useForm } from "react-hook-form";
type FooForm<T> = {
name: string;
height: number;
} &...
1
vote
0
answers
19
views
Controlled value on unknown quantity of inputs? React hook forms
I have a table of user permissions that I want to be able to manage through Controllers of React Hook Forms, the table itself looks like this:
(Right now, the permissions are randomly generated, ...
0
votes
1
answer
32
views
React Hook Forms Register with YupResolver not working properly
I'm trying to a rather simple login form using react-hook-form and yup resolver.
The problem I'm having is that the register function doesn't seem to be working and I honestly ran out of ideas. I'm ...
1
vote
0
answers
54
views
React hook form - working with checkboxes
On our support page, we had to display checkboxes for products to give the user the option to select the product(s) they have problems with.
I mapped through the checkboxes inside a component named ...
0
votes
1
answer
63
views
I want Zod to return multiple errors for the same input
I have a simple password text input, and I want to show multiple errors below the input, but I have noticed that zod only returns one error at a time even if I use superRefine
here are some codes that ...
1
vote
1
answer
57
views
How to implement conditional validation in Zod for a file input field based on a radio button selection?
I'm currently working on a form validation using Zod with react hook forms, and I'm facing a challenge with implementing conditional validation for a file input field based on the selection of a radio ...
-1
votes
0
answers
18
views
Regex - Don't allow special char in input [duplicate]
I've found this regex online: [-’ֿֿֿֿֿ`~!#*$@_%+=.,^&(){}[]|;:”<>?/\ֿ]
I'm using react-hooks-form to validate my form,
the problem is that if I will do this:
rules: {pattern: {
...
0
votes
0
answers
25
views
Handle Submit is Not Working in Use-hook-Form with Material UI in React js
I'm Using the React Hook Form for form validation with Material UI. I don't know why the HandleSubmit(reacthookform) is not Working?. But the Get value method is working I'm able to see the Value.
i ...
0
votes
0
answers
24
views
React Hook Form multi select not working in React Native Dropdown Picker
I am trying to do a multi select using React Native Dropdown Picker using React Hook Form Controller. I could get the multi select values in MultiSelect Form component but on submit I don't get the ...
0
votes
0
answers
8
views
how to manage multi-panel state with fields validations in React
I'm creating a landing page builder that you can drag/drop elements in the dropzone, when you click on any element a left panel appears with the settings for this element and so on (something like ...
0
votes
0
answers
10
views
Next JS, Submit Function Not Triggered on Form Field Validation Error
I have this component with one problem: when there is a mistake in one of the form fields, the 'onSubmit' function does not execute or get called:
"use client";
import * as z from "zod&...
0
votes
0
answers
13
views
ReactQuill with React-hook-form useFieldArray
Hit a wall with trying to use ReactQuill Editor and React-Hook-Form with dynamic content.
I'm basic component that allows the user to edit HTML content and I have tabs for each of the languages the ...
0
votes
0
answers
25
views
File upload from multiple fields using Submit button
I have built a form using react-hook-form and mui.
https://codesandbox.io/s/react-hook-form-multiple-input-fields-vdlj85
This is a 'dymanic' form generator & can have multiple file-upload fields. ...
0
votes
1
answer
41
views
react-hook-form revalidating doesn't start
Found code example at
Forked a sandbox(original is buggy and contains errors)
I want to use custom validation callbacks at each form input element, so I did provide options in register, but validate ...
0
votes
1
answer
67
views
Zod object receiving undefined values from react-hook-form and shadcn Select components
I used shadcn Select and react-hook-form. I'd like to use Zod to validate the values, however, when I click the submit button, the Zod object receives undefined values for all the FormFields. ...