Questions tagged [react-hook-form]

React form library using hooks

Filter by
Sorted by
Tagged with
-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 ...
Pete's user avatar
  • 1
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 ...
1voy's user avatar
  • 25
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 - ...
PoCiTo's user avatar
  • 63
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 ...
Umair's user avatar
  • 345
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 ...
lexer's user avatar
  • 1
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 ...
Device's user avatar
  • 584
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 ...
NueFox's user avatar
  • 341
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 ...
jeevan's user avatar
  • 11
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 ...
Boughazi Akram 's user avatar
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 ...
Muhammed Aboo_Anas's user avatar
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 ...
PabloFB's user avatar
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 { ...
Pavlo Zalutskiy's user avatar
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 {...
Arotiana RANDRIANASOLO's user avatar
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 ...
nivedan maliwal's user avatar
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 ...
marko kraljevic's user avatar
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 ...
Akinola's user avatar
  • 11
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 ...
Rudiua's user avatar
  • 1
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 ...
Karl's user avatar
  • 91
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. ...
Janani's user avatar
  • 21
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 ...
1voy's user avatar
  • 25
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 ...
Aslan's user avatar
  • 85
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 ...
stealing_society's user avatar
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 (...
Younes Ak's user avatar
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 ...
 Benedict's user avatar
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: ...
Tactic Sugar's user avatar
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 ...
Dave's user avatar
  • 15.1k
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 ...
user10980228's user avatar
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 ...
mustadir mahmood's user avatar
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 ...
Jamshaid Tariq's user avatar
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 = () =&...
AndresSp's user avatar
  • 185
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-...
ebbmango's user avatar
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 ...
Faraz Ali's user avatar
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 ...
Hannan Yusuf Khan's user avatar
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 ...
Nick O.'s user avatar
  • 11
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 ...
yaquawa's user avatar
  • 6,808
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; } &...
Changdae Park's user avatar
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, ...
Miguel V's user avatar
  • 657
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 ...
Gonzalo Alberto Parra Viguie's user avatar
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 ...
Mohsen Khadem Hoseini's user avatar
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 ...
Hanzel Rodriguez's user avatar
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 ...
Kavindu Wijesekara's user avatar
-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: { ...
noer's user avatar
  • 35
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 ...
Vidhun's user avatar
  • 19
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 ...
Safi's user avatar
  • 114
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 ...
scr2em's user avatar
  • 994
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&...
Abdelghani Rizki's user avatar
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 ...
Johann Muller's user avatar
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. ...
moys's user avatar
  • 7,797
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 ...
b442's user avatar
  • 80
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. ...
alex1923's user avatar

1
2 3 4 5
48