Questions tagged [yup]
Yup stands as a commanding JavaScript tool, designed to validate and parse object schemas, borrowing its strength from the robust Joi framework.
When defocusing from the field without entering any data, a validation error occurs. Similarly, if you click on the submit button without giving a value, a validation error is triggered - this behavior is expected. However, how can we prevent the validat ...
Currently, I am in the process of developing a form using RHF V7 and MUI V5 while validating its data with yup. One major hurdle that I've encountered is related to a radio button group returning a string value of 'true' or 'false' even when being provided ...
I am currently using react-hook-form along with yup validation and MUI components in my react TypeScript application. The issue I am facing is that the errors from the yup validation only appear after the user tries to submit the form by clicking on the su ...
Having an issue with React Hook Form and Material-UI file uploading. When submitting the form, I receive a string path of one file instead of FileList instance. <Controller name='attachments' control={control} defau ...
I'm trying to set up a form where if the region is "Europe" or "other", then certain fields are required. I've looked through the Formik documentation but haven't found a solution yet. <Formik enableReinitialize={true} initialValues={{ name: curre ...
I'm facing an issue with the default value in my autocomplete feature within my React app. Even though I set a default value, when I try to submit the form, it still shows as invalid because it appears to have no value until I manually click on the autocom ...
I've hit a wall with React Hook Form phone masking and validation. Any assistance would be greatly appreciated! My setup involves using React Hook Form with Yup for form validation and MUI for UI. I managed to implement masking on my phone field usin ...
In my current web project, I am utilizing a combination of React, Material-UI, Formik, and formik-material-ui. Specifically, I have implemented a Formik form that includes validation using yup. const schema = yup.object({ name: yup.string().trim().low ...
Here is the Model (popup) code I am using to send the user's email address to the backend service. The Model component is being rendered in my Login Component. However, I am facing an issue where I am unable to submit this form. Despite having working Yu ...
I've encountered an issue with my Formik form that utilizes Yup for validation. I'm having trouble integrating a Datepicker field into the yup validation process. Here's the code where everything renders correctly, but when I try to nest <DatePicker/&g ...
I am working on a React and Next.js project where I am using Formik for handling forms and Yup for validations. One specific input field requires some validations to be performed. This field must be required, so if the user does not enter any information, ...
I am currently delving into the world of React/Next.js, Formik, and Yup. My goal is to make an API call to the database upon blurring out of an input field. This call will fetch some data, perform database-level validation, and populate the next input fiel ...
const [userInfo, setUserInfo] = useState({ fullName: "", email: "", }); // State for user information const handleChange = (event) => { console.log(event.target.value); }; // Function to handle input changes <Grid contain ...
I'm currently working on a form using Formik, Yup, and ReactJS. Specifically, I am focusing on the date field validation to ensure that the user is at least 18 years old. Within the validationSchema parameter in Formik, I have included the following code: ...
I've utilized the controller component from react-hook-form to trigger the material UI autocomplete feature successfully. However, when I include a defaultValue parameter and then click on the submit button, an error message appears indicating validation ...
While attempting to load data into an MUI Autocomplete, I encountered this message in the console. React-hook-form and yup are being used for form validation. Image displaying the warning To showcase my issue, I have set up a CodeSandbox. In this example, ...
Here is a snippet of the code I'm working on: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx I am currently in the process of creating a form that will accept an array of objects called Criterion, which are of a specific type: export inte ...
How can I use Yup to validate if the start date overlaps with the end date in a form that creates an event using Formik library? I have two date pickers for choosing the dates and times. I want to display an error message if they overlap. Thanks for the ...
Currently, I am implementing form validation in a React project using both Yup and Formik. The challenge I am facing is with validating a react-select element within the form. To achieve this, I am utilizing the validationSchema property of Formik to valid ...
When implementing react hook form in my React app, I encountered an issue while validating specific fields and had to add some conditions to the schema. yup .object({ test1: yup.number().when('test2', (test2: number, schema: yup.NumberSchem ...
While working with a form using Formik, Yup, and NextUi v2 Inputs, an issue arises when typing in one of the inputs that triggers a warning in the console: A component is changing an uncontrolled input to be controlled. This warning is usually due to the ...
Below is the code snippet in question: type FormValues = { files: File[]; notify: string[]; }; const validationSchema = yup.object({ files: yup .array<File[]>() .of( yup .mixed<File>() .required() .t ...
Whenever I attempt to enter text into the input fields, no characters show up. Strangely, a similar login page using the same code is functioning perfectly fine. At this moment, I'm baffled as to why it isn't working on this specific one. My suspicion wa ...
I have implemented the validation schema below using Formik: validationSchema = { Yup.object({ emails: Yup.array() .of(Yup.string().email('Ensure to enter valid email addresses only.')) .min(1, 'Please ...
I recently updated my material-ui version from v4 to v5, but I'm encountering issues with a component that utilizes the react-number-format library. It seems like the problem is related to forwarding refs, and despite my efforts, I haven't been able to res ...
When dealing with a form that includes lists of countries and provinces, there are specific rules to follow: The country field/select must be filled out (required). If a user selects a country that has provinces, an API call will fetch the list of provinc ...
Using a combination of react-final-form, material ui, mui-rff, and yup for form validations presents some challenges when dealing with multiple wizard screens. Each screen contains HTML form elements such as inputs and radio buttons that are required for u ...
I'm struggling to figure out why the validation isn't functioning as expected: export default function Check() { const label = { inputProps: { "aria-label": "termsOfService" } }; const formSchema = yup.object().shape({ ...
I am facing an issue with validation. I would like to set a rule that allows selecting both the start_date and end_date only if the access value is 1. Otherwise, if the access value is not 1, then only today's date should be selectable. Check out the code ...
Just joined Yup and struggling to validate an array that is not empty. My tech stack includes react, formik, yup, and material-ui. Here's a sample I put together: Check out the example here I attempted to use the required method in validationSchema: va ...
TL;DR To see the working code, visit: https://codesandbox.io/s/stoic-beaver-ucydi The refactored version using React Hook Form can be found here: https://codesandbox.io/s/objective-cloud-bkunr?file=/src/ControlledTextField.tsx In Depth Explanation No Re ...
Is there a way to call a custom function on a Formik field when using the onChange event? I've tried calling it but it's not working as expected. Below is my custom function within a React Component: onStudentScore = (value, form) => { ale ...
Hey there, I'm currently facing an issue while using Formik + Yup to validate my form. I am having trouble validating the number for the date, and whenever I try to interact with any field, the app crashes after adding the number field. Can someone pr ...
With the React form in my setup, I am utilizing Formik, Yup, and Material UI for forms and textfields: import { TextField } from '@material-ui/core'; This is specifically for the E-mail form. Upon blurring out of the field, it produces the foll ...
This is the main code section for my app const App = () => { const classes = useStyles(); const formik = useFormik({ initialValues: { name: "", email: "", password: "", confirmPassword: "" }, validationSc ...
When the validation fails, my goal is for the error message and TextField to be styled like this: View Desired Result Image. Currently, with MUI, I've made progress towards the desired look. Here's where I'm at: View My Progress Image, but I'm unsure how ...
Yup offers the ability to validate based on another value using .when. For example: var inst = yup.object({ isBig: yup.boolean(), count: yup .number() .when('isBig', { is: true, // alternatively: (val) => val === true then: yup ...
I am facing an issue in my Next.js application where I am attempting to validate the upload of an image using Formik and Yup by passing a method called handleOnImageChange in the component. However, I am struggling to make it work this way. I have also tri ...
I am currently utilizing the power of Yup in conjunction with Formik within my react form setup. The fields within the form are dynamic, meaning their validations need to be dynamic as well. export const formData = [ { id: "name", label: "Full n ...
UPDATE: Problem solved! I managed to find a solution and have updated my sandbox with the fix! REVISION: After some investigation, I have identified that the issue lies within this specific line of code in the autocomplete... isOptionEqualToValue={(option ...
In my code, I have an initial values list saved as an array: initialValues ={ ranges: [{ fromDate: '', endDate: '' }, { fromDate: '', endDate: '' }, { fromDate: '', endDate: &apos ...
Currently, I am working on a React application with Typescript and using Formik along with Yup validation. However, I have encountered an issue with setting values in a Select element. It seems that the value is not changing at all, or it may be resettin ...