Yup Was Not Working With Formik and also not provide any type of error

user_13807647 0
Viewed 3603

Yup Validation Not Working I Also tried Like This import Yup from 'yup' But Still Not Working.., when I create a simple validate Function without YUP it was worked fine. but when I use YUP that time Validation Not Work. Added Form Component

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const initialValues = {
    name : "",
    surname : "",
    address : ""
}

const validateSchema = Yup.object({
 name: Yup.string().required('This Field is Required'),
 surname: Yup.string().required('This Field is Required'),
 address: Yup.string().required('This Field is Required')
});

const  onSubmit =  values =>{                        
    console.log('FormData->',values);
}

function Form() {
    const formik = useFormik({
        initialValues ,
        onSubmit ,
        validateSchema 
    })
    return (
        <div className="container x col-md-4 col-md-offset-4"  >
         <form onSubmit={formik.handleSubmit} >   
            <div className="form-group">
                <input autoComplete="off" onBlur={formik.handleBlur} onChange={formik.handleChange} 
                value={formik.values.name}  name="name"  className="name form-control-lg" placeholder="Enter A Name" />
                <small> 
                    {formik.touched.name && formik.errors.name ? <div className="error"> {formik.errors.name}  </div> : null} 
                </small>
            </div>
            <div className="form-group">
                <input autoComplete="off" onBlur={formik.handleBlur} onChange={formik.handleChange} 
                value={formik.values.surname}  name="surname" className="surname form-control-lg" placeholder="Enter A Surname" />
                <small> { formik.touched.surname && formik.errors.surname ? <div className="error"> {formik.errors.surname}  </div> : null} </small>
            </div>
            <div className="form-group">    
                <input autoComplete="off" onBlur={formik.handleBlur} onChange={formik.handleChange} value={formik.values.address}
                  name="address" className="address form-control-lg" placeholder="Enter A Address" />
                <small> {formik.touched.address  &&  formik.errors.address ? <div className="error"> {formik.errors.address}  </div> : null} </small>
            </div>
            <button className="btn btn-danger" >Submit</button>
        </form>
    </div>
    )
}
export default Form;
yup formik reactjs
2 Answers

The valid option here is validationSchema not validateSchema. Just set the right one:

const validationSchema = Yup.object({
  // ...
});

useFormik({
  // ...
  validationSchema
})
user_31042260

To use formik and yup, first you have you do npm install yup and npm install formik. if your yarn user then do yarn add formik and yarn add yup.

after that follow this code.

import {Formik} from 'formik';
import * as yup from 'yup';
//functional component am using
export const Auth = () => {
const initialFormValue ={
email: '',password: '',};
const SignInSchema = yup.object().shape({
email: yup.string().email('Invalid Email').required('Email is Required'),
password: yup.string().min(5, 'Too Short').required('Password is Required'),
})
<Formik initialValues={initialFormValue} validationSchema={SignInSchema}
 onSubmit={values => console.log(values)}>
 {({values, errors, touched, handleChange, handleBlur,
handleSubmit,isSubmitting,
isValid}) => (
 <>
 <input name='email' type='email' handleChange={handleChange} value=
 {values.email} onBlur={handleBlur} label='Email' />
{errors.email && touched.email ? (<Error>{errors.email}</Error>): null}
<input name='password' type='password' handleChange={handleChange} value=
{values.password} onBlur={handleBlur} label='Password' />
{errors.password && touched.password ? (<Error>{errors.password}</Error>):
null}
<button onClick={handleSubmit} type="submit">Send</button>
 </>
) }
 </Formik>
)}

its not necessary for you to define initial value outside you can do inside formik too <Formik initialValues={email: '', password: ''}> </Formik> i hope this will help you thank you.

user_125578990
Related