Questions tagged [react-forms]

245 questions
22
votes
4 answers

Form pattern validation with react-hook-form

I have been working on a react form and I need to restrict users to put special characters and allow only these ones: [A-Za-z]. I have tried the below code but I am still able to insert inside special characters such as: '♥', '>', '+', etc. export…
user10823960
20
votes
5 answers

Conditional validation with react hook form

Here is my form looks like and also CodeSanbox. currently I'm using react-hook-form as you can see form has 3 inputs. Submit button should be disabled until all the required fields are entered. Two use case: If "Check" is unchecked: only "id"…
Nnp
  • 1,813
  • 7
  • 36
  • 62
13
votes
5 answers

React Form being submitted at the wrong time

I have two buttons, one of type "button" and one of type "submit", both wrapped in a form and which toggle each other. Weirdly, if I click on the button of type "button" the form is submitted and if I click of the button of type "submit" the form is…
TehYoshi
  • 133
  • 6
5
votes
3 answers

How do I set initialValues of useFormik to data returned from an API request

I have an update ProfilePage component and I want to preload the form values with the data received from an Axios API request using useQuery, but it seems the useFormik initialValues render before the request is completed therefore having the…
joe
  • 51
  • 1
  • 3
5
votes
1 answer

React formik Create and update form in single form issues

I am using React formik I created Create form and update form in a single component. The update based on the One id if update means on page the id will be send in post method and get an data Database and the data show in the input field and update…
Noob
  • 136
  • 1
  • 2
  • 17
5
votes
3 answers

React formik Form rendering Speed is slow issue

I am using react formik the form have more 30 input field that field render are slow when typing print slow and easer Slightly slow any idea for improve the field speed. please check in codesandbox code Sandbox Link…
Gokul
  • 187
  • 3
  • 11
5
votes
4 answers

Validation for array of fields using react hook form

I want to add validation to the input fields. I am using react hook form. The validation should be like the sum of the fields should be 100. If any of the fields make the sum more or lesser than 100, it should show an error at the input field (the…
Abidh
  • 457
  • 2
  • 5
  • 13
4
votes
3 answers

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef(). With React Hook Form

I am new to react-hook-form. I am pasting my code below import React from "react"; import { useForm } from "react-hook-form"; const Inventory = () => { const { register, handleSubmit, formState: { errors }, } = useForm(); const…
Nahidujjaman Hridoy
  • 1,175
  • 12
  • 28
3
votes
1 answer

React Hooks form showing undefined username in logs

I've integrated react hooks form in my react native app and I'm trying to connect the text input with the hooks controller for validation but when I write the username and click on the button it's showing username undefined not sure where the…
3
votes
1 answer

how to use React-Hook-Form on Antd Input?

How can I use react-hook-form on antd inputs ? usually its like this const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { firstName: "", lastName: "", email: "", …
Solid1
  • 426
  • 1
  • 2
  • 14
3
votes
1 answer

useForm how to setValue for dynamic input

Hi I have Form create using useForm I have Api will return data like this const createQuestion = { _id: "da2sd3dsa5d56a5sdd5as48d4a94949", framework: "hard", benchmark: "hard", difficulty: "hard", questionType: "mcq", …
Ahmed Radi
  • 677
  • 1
  • 5
  • 20
3
votes
1 answer

How to set a input field based on other inputs in react-hook-form

I have FirstName and LastName input Fields. I have a read only field called FullName which will have value based on FirstName and LastName. What ever is typed in the first name and last name input fields the Fullname will be Firstname + LastName. I…
Joy
  • 105
  • 1
  • 2
  • 10
3
votes
3 answers

reactjs error - onChange is not a function error

I have created a field array with file input and a text field. Everything seems to works fine but when I try to upload a small image or typing something in the textfield, a Type error pops up with "onChange is not a function" message. How do I fix…
jch02140
  • 45
  • 1
  • 6
3
votes
0 answers

React - Cursor jumping to the end of input

When the user changes the input value, then the cursor moves to the very end of the input. I initially thought this was caused by the onChange callback, but it has nothing to do with the issue. I'm not sure what else is causing this issue. Any…
victorhazbun
  • 786
  • 8
  • 16
3
votes
2 answers

react-table v7 within react-hook-form

i am working on a complex react form where it has few controlled inputs along with grid/table. currently i am using react-hook-form for validation. here is my mockup. idea here is show grid as required until user adds some data. user can add/remove…
Nnp
  • 1,813
  • 7
  • 36
  • 62
1
2 3
16 17