Formik: Synchronous validation

Created on 6 Mar 2018 · 6Comments · Source: formium/formik

Bug, Feature, or Question?

Question

Current Behavior

Since Yup validations are async, components render twice as far as I've read in previous issues, and I have 150 input fields on one page and it's extremely noticeable when user starts to type, it basically becomes unusable. So, since there is boolean flag in validateYupSchema method for synchronous version is there a way to set it as prop on Formik component?

Desired Behavior

To run Yup validations synchronously.

Formik Version: 1.0.0-alpha.2
React Version: 16.2.0
OS: MacOS
Node Version: 8.9.1
Package Manager and Version: npm v5.6.0

stale

Source

marcoroganovic

👍1

Most helpful comment

By the way, this is how I did synchronous validation using yup and validate function:

import { validateYupSchema, yupToFormErrors } from 'formik';

validate: (values: FormValues) => {
    const validationSchema = object().shape({
        ...
    });

    try {
        validateYupSchema<FormValues>(values, validationSchema, true);
    } catch (err) {
        return yupToFormErrors(err);
    }

    return {};
},

latviancoder on 8 Mar 2018

👍3

All 6 comments

So in FastField, I check if validations can be run synchronously. I think that logic can be moved into Formik as well.

jaredpalmer on 6 Mar 2018

@jaredpalmer that would be cool. I have to use custom UI components and can't use FastField because of it.

latviancoder on 6 Mar 2018

By the way, this is how I did synchronous validation using yup and validate function:

import { validateYupSchema, yupToFormErrors } from 'formik';

validate: (values: FormValues) => {
    const validationSchema = object().shape({
        ...
    });

    try {
        validateYupSchema<FormValues>(values, validationSchema, true);
    } catch (err) {
        return yupToFormErrors(err);
    }

    return {};
},

latviancoder on 8 Mar 2018

👍3

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.