60 questions
0
votes
0
answers
102
views
React Hook Form + Zod: useForm formState returning proper isValid value, but errors is empty
I am using useForm react hook + zod for validation schemas.
From the formState all values returned are as expected, but the "errors" object. I am trying to set hasError of an input and no ...
0
votes
0
answers
26
views
How to handle network errors when using React + supabase + useForm?
I'm trying to submit a form to an instance of supabase that i know is offline so i can test handle network errors and show a message to the user.
This is what i have:
const {
register,
...
1
vote
2
answers
49
views
Use single onSubmit to submit data (array of objects) from multiple related forms in react js
I have a page that has multiple form. The for register multiple users to one single endpoint. My Payload should look like this:
[
{username: "benjoe", address: "2, Salem Road, NA"}...
- 155
0
votes
1
answer
498
views
How to store the selected checkboxes value in a dynamic form using Zod?
I am using zod for a form in a React app.
In the form, there is a search textbox. You can type the search key words into that textbox to search for web sites and the search result (name of web sites) ...
0
votes
0
answers
58
views
Why when i click submit button, my onSubmit function is not working (not logging data)? shadcn, useForm, zod
Every time when i try to submit data, my form is highlighting the input, and in console there is no error messages.
My schema:
export const MatchPredictionSchema = z.object({
matches: z.array(
z....
1
vote
1
answer
34
views
req.file is empty or undefined
I want to use the useForm along with a validation system to save data using the append() function and send it to MongoDB with a fetch request. However, when I inspect the formData object, the error is ...
- 21
0
votes
0
answers
40
views
Can we Configure a React Native's custom form component' input field (which is also custom) from outside the Form component?
I've made a Form component for handling signup/login now i want to handle add details and add facts screen using this form component now the problem is that the input fields of both login/signup and ...
0
votes
0
answers
10
views
Remove event.target.textContent useForm using MIUI Custom Autocomplete
i try to remove the textContent at MUI Custom Auto complete, the value already deleted but not with the text
heres my snippets code,
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((...
0
votes
2
answers
336
views
Why is useForm not being recognised as a function
error image
Why am I facing this error when I try to use useForm:
⨯ src\app\journal\page.tsx (18:53) @ useForm
⨯ TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_5__.useForm) is not a function
...
0
votes
0
answers
58
views
How to validate the PnP icon picker using Zod and UseForm?
I am using the PnP React IconPicker in a form. For the form validation, I am using Zod and UseForm (react hook form). How can I validate the icon picker so the user MUST choose an icon with the icon ...
0
votes
0
answers
35
views
How can I add dynamic values to default values in useForm?
I have two types of accounts, each with different features: 'star' and 'follower.' In my useForm on the settings component, both account types share some default fields. However, for the 'star' ...
- 263
0
votes
1
answer
77
views
Why I'm getting undefined then correct value in console.log()?
This is the OnSubmit function:
const onSubmit = async (data) => {
console.log(data);
const formData = new FormData();
formData.append("courseName", data....
0
votes
1
answer
815
views
Using Typescript with React and useForm
I am trying to factor out some repetitive code for a React form. I intend to add a label to the input returned from function Field and perhaps a few other doodads. I have been trying to use a proper ...
- 11
1
vote
0
answers
2k
views
optional input number with Zod schema
Hi everyone I'm using for the first time Zod with React useForm and I'm having some trouble setting up a optional input.
Zod Schema
discount: z
.string()
.optional()
.transform((discount) ...
- 169
1
vote
0
answers
159
views
How Create Reusable form components using react + react hooks form + yup
I have InputGroup component which accepts props like placeholder,type, etc. i am trying to create a form using InputGroup component. This react app uses Yup , form Hook , ChakraUi
and i use ...
0
votes
2
answers
5k
views
How can i get the value of a select in react using React Hook Form?
The main problem in my code is:
1 - My function filtra_pavimento is not being called; So, i suppose my onchange is not working well. I heard something about getValues, but i'm not so sure about it. I ...
0
votes
1
answer
495
views
how to update array in react typescript
I'm trying to update my state on the form submission but I got an error on TypeScritp
I'm new at TS and I don't know how to fix it
enum ServiceTypeEnum {
Replace = 'replace product',
Fix = 'fix ...
2
votes
0
answers
654
views
The form is getting submitted after setting custom error with setError function in useForm hook
// ** React Imports
import { FocusEvent, useEffect } from 'react'
// ** MUI Imports
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/...
- 23
0
votes
0
answers
354
views
How to add validationSchena dynamically in useForm object
I am new to Vuejs and I am using Vue 3 with composition API. I am creating a Yup schema through custom fields. The problem I am facing that how can I add/assign dynamically created Yup schema to ...
- 113
7
votes
1
answer
5k
views
How to set API Data in react hook form
I have this input field. I am using this input to submit the data for adding new record on server. Now when user wants to edit the data I have to show the API data in this field. How to achieve this?
...
- 387
1
vote
0
answers
159
views
Unable to type anything in the Text Input field while using two React hook forms in a single component
So, I am trying to create Registration and Login form separated by only a toggle switch inside a card and for that I declared two different useForm() instances.
const {control, handleSubmit, formState:...
1
vote
1
answer
159
views
How to prevent loading blank page after submitting form?
I have an issue with reloading a blank page after submitting a contact form. Contact form is working, email is sending to me but after that itself loading a blank page.
I would prefer it to act like ...
0
votes
1
answer
1k
views
Setting input type='datetime-local' value and min attribute in useForm
I know that you can set defaultvalues inside useForm hook and reset it by reset() from 'react-hook-form'. But I'm not able to set value and min attribute to new Date() so that each time when form ...
1
vote
0
answers
46
views
React doesn't detect that an input had been filled
I am using some code with fields that are "required", the confirm button will not activate while they are empty. When someone else types something in the field while running it on their ...
- 193
0
votes
1
answer
1k
views
How to use setValue for useForm hook for creating form for edit page (REACT, javaScript)
Hi I have created components for Book Management System like Displaybooks, Addbooks, which are working fine, I have created below component for editing existing books:
import React, { useContext, ...
1
vote
0
answers
93
views
how to use DateTimePicker (MUI) with YupValidation and restrict startdate to come after enddate and enddate come before startdate?
This is my Current code:
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { DateTimePicker } from "@mui/x-...
- 11
0
votes
1
answer
14k
views
React useForm Hook with array of elemens
I have to handle a form and I'm using the useForm library of "react-hook-form", the problem is that I need to handle multiple data, such as arrays and objects, for now I've only managed to ...
- 75
1
vote
1
answer
236
views
why does handleSubmit in react hook useform is not being called
I am using useform hook but the handlesubmit function is not being called . here is the code:
This is the useform hook i am using
const {
register,
handleSubmit,
formState: { errors },
watch,
reset, ...
- 33
1
vote
1
answer
3k
views
react testing library, trying to test useForm validation messages
I am trying to write a RTL test for my validations on my form. I am using useForm hook with Yup fro my validations.
The scenario i want to test is when user clicks the Add button that submits the from ...
- 1,655
0
votes
1
answer
874
views
React UseForm: How to ignore form validation using "Save as Draft"
I am working on one project in React and for the form validation, I've been using UseForm. I have two buttons at the end of the form "Save as Draft" and "Send". If you click on ...
0
votes
0
answers
52
views
How to handle PUT request?
It may be an easy question but being a beginner I'm having issues while handling PUT requests. I have to update my form and save it to the database.
I'm using Next.js and React. My protected request ...
- 119
1
vote
1
answer
3k
views
useForm in React: formState.isDirty is true, but .dirtyFields is empty
I have a React JS form using useForm library.
This is a popular library so I'm not sure this can be a bug but I'm getting into a state which seems incorrect. See the screenshot of the console in ...
- 10.2k
0
votes
3
answers
324
views
Toggle individual button in the form
I'm trying to implement a form with email and communication channels and want to update the form and then save it. While updating I'm facing the problem to toggle the button/icon. Please find the code ...
- 119
-1
votes
1
answer
175
views
display returning value from post
I use Laravel + Breeze + React. In default this stack using "post" from useform. Standard example:
const submit = (e) => {
e.preventDefault();
post(route('register'));
};
But ...
- 425
0
votes
1
answer
681
views
Form submission React , axios , useForm
Using useForm need to create a form where, for example, 3 inputs, 2 types of text ('name' and 'email') and 1 file ('photo'). When the button is clicked, so the post is submitted, a POST request must ...
0
votes
0
answers
68
views
How to upload image in MERN web application with react-hook-form and multer
I am using react-hook-form for form submission and multer for storing images, but not able to store image.
const onSubmitHandler = async (data) => {
const { photo, ...others } = data;
...
- 79
0
votes
1
answer
132
views
getting inputs data from previous pages in react by using useForm
I'm building a Reactjs website that has three pages of inputs the last page should have all the data entered in the previous pages it will be a summary of the data
for the first three pages, I have ...
- 661
0
votes
1
answer
948
views
Display uploaded file name of file input in paragraph
Hi i am using useForm in my form. I want to display filename from file input i above input in fileName. How can i extract file name and display when file is uploaded by user. This is my input:
<div ...
- 85
1
vote
0
answers
1k
views
Getting errors using mantine useForm APIs like insertListItem
Hello everyone I am facing some issues regarding using MantineUI. I am trying to crate a form with some nested values.
So, I am trying to use the mantine useForm hook, but when I run the sample code ...
- 11
1
vote
1
answer
46
views
Why is my error message not showing up when I click enter?
I'm trying to have an error message pop up if the user submits an email without inputting a recipient, however, nothing happens upon clicking enter. Is there something I'm missing? pls help
import ...
- 11
1
vote
0
answers
527
views
how to read value from API in react select
Hi I have react select input and I was using useForm to setValue to inputs
How to read value from api and append it to my react select input
api return
const createQuestion = {
_id: "...
- 787
3
votes
1
answer
3k
views
how to pass value to Yup?
I use useForm, but I don't think it matters. I want dependence on isAdmin to validate fields: paymentMethod, otherPaymentMethod. I tried with context: { isAdmin: true } and to get it in transform((...
- 216
0
votes
0
answers
2k
views
React Hook Form - Yup Validation not working when I click on Submit (I am navigating to same component when clicked)
I have reused Employee component which uses yup validation, validation is not working when I click on submit for second time.
const {
register,
handleSubmit,
formState: { errors },
control,
} = ...
1
vote
0
answers
222
views
submit multiple forms with one submit button using useForm
Is it possible to submit multiple forms with one submit button using useForm hook? If possible, can someone tell me how can I do? I use two useForm instances for form creation but I only can submit ...
- 11
0
votes
1
answer
983
views
Entering spaces in a validated input field (useForm)
there is a question that has puzzled me for some time now.
The firstName input field should allow the user to enter spaces (before \ after \ in the middle of the word).
I added inputRef property to ...
4
votes
2
answers
7k
views
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 ...
- 165
3
votes
5
answers
19k
views
useForm and react-hook-form is giving problems with I use it with NextJs
I'm coding in NextJs and I needed to use 'useForm' but it keeps giving constant errors... "Cannot resolve 'react-hook-form'."Please help.
import React from "react";
import { ...
0
votes
0
answers
196
views
dispatching a reducer action resets form values react
I have forgot password page which obviously takes email input. After submitting the form I am displaying a toast notification confirming the success or error of operation.
I created a Notification ...
- 102
5
votes
2
answers
21k
views
React useForm get value from TextBox
I am using React useForm hook to submit data from my form. The requirement is the user should see the sample data in a preview div before he submits. How can i get the value from input text boxes and ...
- 165
0
votes
1
answer
558
views
React Hook Form controller extract variables
I have some questions about the react-hook-form controller
https://react-hook-form.com/api/usecontroller/controller
At the moment it looks like this:
<Controller
name="password"
...
- 15