Stack Overflow
Stack Overflow

Questions tagged [formik]

Formik is a form library for React and React Native

Formik is a small React form library that helps you with the three most annoying parts:

  1. Getting values in and out of form state
  2. Validation and error messages
  3. Handling form submission

By colocating all of the above in one place, Formik will keep things organized, making testing, refactoring, and reasoning about your forms a breeze.

Why not Redux-Form?

Authors

Resources

2917 questions
169
votes
10 answers

Conditional Validation in Yup

I have an email field that only gets shown if a checkbox is selected (boolean value is true). When the form get submitted, I only what this field to be required if the checkbox is checked (boolean is true). This is what I've tried so far: const…
reectrix
  • 7,999
  • 20
  • 53
  • 81
95
votes
16 answers

Formik onSubmit function is not working on my code

I am creating a form by using react and formik.Below is my code:
{ console.log("Enter in submit function", values); …
NewCoder
  • 967
  • 1
  • 7
  • 7
94
votes
17 answers

Validation using Yup to check string or number length

Is there a yup function that validates a specific length? I tried .min(5) and .max(5), but I want something that ensures the number is exactly 5 characters (ie, zip code).
reectrix
  • 7,999
  • 20
  • 53
  • 81
82
votes
12 answers

React Formik use submitForm outside

Current Behavior (this.form = node)} onSubmitCallback={this.onSubmitCallback} render={formProps => { …
ssuhat
  • 7,387
  • 18
  • 61
  • 116
67
votes
3 answers

React Formik - Trigger validation only on form submit

I am using Formik in my React Native application. On the login form I have two fields: email and password, both of them are required. I've written such validation rules: export const LoginSchema = Yup.object().shape({ email: Yup.string() …
lecham
  • 2,294
  • 6
  • 22
  • 41
62
votes
9 answers

Formik - How to reset form after confirmation

In Formik, how to make the Reset button reset the form only after confirmation? My code below still resets the form even when you click Cancel. var handleReset = (values, formProps) => { return window.confirm('Reset?'); // still resets after you…
Aximili
  • 28,626
  • 56
  • 157
  • 216
58
votes
7 answers

ReactJS: How to handle Image / File upload with Formik?

I am designing a profile page for my site using ReactJS. Now my question is how do I upload the image from local machine and save it to the database and also displaying it in the profile page import React, {Component} from 'react'; import { connect…
TMA
  • 1,419
  • 2
  • 22
  • 49
56
votes
5 answers

React formik form validation: How to initially have submit button disabled

Below is my React form validation code in which I am using formik. By default when the form loads, I want to keep the submit button disabled: import { useFormik } from "formik"; import * as Yup from "yup"; const formik = useFormik({ …
user8463989
  • 2,275
  • 4
  • 20
  • 48
53
votes
6 answers

Yup: deep validation in array of objects

I have a data structure like this: { "subject": "Ah yeah", "description": "Jeg siger...", "daysOfWeek": [ { "dayOfWeek": "MONDAY", "checked": false }, { "dayOfWeek": "TUESDAY", "checked": false }, { …
olefrank
  • 6,452
  • 14
  • 65
  • 90
51
votes
6 answers

How to properly use Formik's setError method? (React library)

I am using React communicating with a backend. Now trying to properly implement Formik (Form library). Main question: How do I properly use Formik's setError method? Client side validation errors show properly, but now I am trying to set/show the…
Rik Schoonbeek
  • 3,908
  • 2
  • 25
  • 43
51
votes
6 answers

How to use custom Input with Formik in React?

I'm trying to use DatePicker within Formik. But when I click DatePicker's date its form value is not changed. Instead, I got this error: Uncaught TypeError: e.persist is not a function at Formik._this.handleChange (formik.es6.js:5960) I…
ton1
  • 7,238
  • 18
  • 71
  • 126
48
votes
6 answers

React-datepicker with a Formik form

I'm trying to use react-datepicker in a Formik form. I have: import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class Fuate extends React.Component { state = { dueDate: new Date() …
Mel
  • 2,481
  • 26
  • 113
  • 273
44
votes
5 answers

Async validation with Formik, Yup and React

I want to make async validation with formik and validationschema with yup but i can't find the example or demo.
Day's Night
  • 613
  • 2
  • 8
  • 12
42
votes
5 answers

password validation with yup and formik

how would one go about having password validation but at the same time having the errors be passed to different variables? i.e password: Yup.string().required("Please provide a valid password"), passwordMin:…
Strahinja Ajvaz
  • 2,521
  • 5
  • 23
  • 38
41
votes
5 answers

Validating file presence with YUP

I'm using Yup to validate my form. In one of my form, I want to validate that one has a file. I've tested this (and it's not working): Yup.object().shape({ file: Yup.object().shape({ name:…
cappie013
  • 2,354
  • 1
  • 22
  • 30
1
2 3
…
99 100