Formik is not submitting values.I am showing 2 out of 5 fields on Sign In and 5 fields on SignUp. formik is asking to also fill other 3 fields

Question

I am using one component as Sign In and Sign Up form. I have Fields of FirstName, LastName , Email and Password. I have also applied Yup validation and set the "required" property on every field. As I am showing only two fields during Sign In so the formik form is not submitting the form values and asking to fill the required form fields. So, do I have to create another component for SignIn Form or can be done in this single form.

 <Formik
            initialValues={initialValues}
            onSubmit={(values)=>{
              console.log(formData);
                setFormData({...values})
                console.log(formData);
                console.log(values)
            }}
            validationSchema={validationSchema}
            >
            {(formik) => (
                <Form className={classes.form} onSubmit={formik.handleSubmit}>
                <Grid container spacing={2}>
                    {isSignUp && (
                    <>
                        <Input
                        name="firstName"
                        label="First Name"
                        type="text"
                        half
                        />
                        <Input name="lastName" label="Last Name" type="text" half />
                    </>
                    )}
                    <Input name="email" label="Email" type="email" />
                    <Input
                    name="password"
                    label="Password"
                    type={showPassword ? "text" : "password"}
                    handleShowPassword={handleShowPassword}
                    />
                    {isSignUp ? (
                    <Input
                        name="confirmPassword"
                        type="password"
                        label="Confirm Password"
                    />
                    ) : null}
                </Grid>
                <Button className={classes.submit}
                    type="submit"
                    variant="contained"
                    fullWidth
                    color="primary"
                >
                    {isSignUp ? "Sign Up" : "Sign In"}
                </Button>
                
                <Grid container justify="flex-end">
                <Grid item>
                <Button color="primary" onClick={switchMode}>{isSignUp ?"Already have an account?Sign In":"Don't have an account?Sign Up"}</Button>
                </Grid>
                </Grid>
                </Form>
                
            )}
            </Formik>

You need to pass isSignUp condition inside validation schema. Where it will set mandatory if isSignUp is true to those field otherwise it wont check on those validation — Shubham Verma
Yeah it will then won't check for validation.But what if I had to check for validation for those 2 fields.Otherwise if I won't check for validation, the form can be submitted empty too and I don't want that. validationSchema={isSignUp?validationSchema:null} — Jamal Gewa

Jamal Gewa Jamal Gewa · Accepted Answer · 2021-03-17T07:27:51

I have added an other "SignInSchema" for that two fields and it's working fine now. validationSchema={isSignUp?validationSchema:signInSchema}

Formik is not submitting values.I am showing 2 out of 5 fields on Sign In and 5 fields on SignUp. formik is asking to also fill other 3 fields

1 Answers