React Form Validations Using formik.

Form input validations using Formik

Let me introduce myself. I am Nawaz Sharief, Junior Software Developer at Canadiv. I have been working in this field for the last 6 months.

I am currently using React for front-end web development. During my work, I have faced some difficulties while validating forms from the front-end development. During my initial stages, I used to write separate functions for every input field to validate them. But, that became a headache as it increases the lines of the code. I was particularly not a fan of functional components a I was constantly working in React with class components till now.

Some input fields needed validation on blur events while some needed validations on submit events. Then I came across an npm package called formik which can be used to validate forms in an easier way.

import { Component } from 'react'
import { Button } from 'react-bootstrap'
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
export default class SignIn extends Component {
signIn = (value) => {
        console.log(value)
    }
    
    render() {
        return (
            <div className=''>
                <div className=''>
                    <h1 className=''>Sign In</h1>
                    <Formik
                        enableReinitialize
                        initialValues={{
                            email: '',
                            password: ''
                        }}
                        validationSchema={Yup.object({
                            email: Yup.string().email('Invalid email').required('Email Required'),
                            password: Yup.string().required('Password required')
                        })}
                        onSubmit={(values, { setSubmitting }) => {
                            setTimeout(() => {
                                this.signIn(values)
                                setSubmitting(false);
                            }, 400);
                        }}
                    >
                        <Form autoComplete='off'>
                            <div className=''>
                                <label>Username</label>
                                <Field
                                    name="email"
                                    type="text"
                                    placeholder='Enter Email'
                                />
                                <ErrorMessage
                                    className='text-danger'
                                    name="username"
                                    component='span'
                                />
                            </div>
                            <div className=''>
                                <label>Password</label>
                                <Field
                                    name="password"
                                    type="password"
                                    placeholder='Enter Password'
                                />
                                <ErrorMessage
                                    component='span'
                                    className='text-danger'
                                    name="password"
                                />
                            </div>
                            <Button variant='primary' type='submit'>Sign In</Button>
                        </Form>
                    </Formik>
                </div>
            </div>
        )
    }
}

Here in formik we can give initial values to the input fields using the initializeValues object. This object will set the initial values of input fields.
The validation schema object looks after the validation of the respective input fields. Only when all the validation schema requirements are met the form will get submitted and the function signIn will be called.

Form values can be auto-completed based on the previous data by using an attribute called autoComplete which accepts Boolean values. Form will contain Fields which are our input values. Fields can be different types like input, select, textarea, radio, checkbox. We can also validate particular Fields by adding an attribute called validate which will accept a function as its value. This function will return errors if any present.

We can also add additional validation in validationSchema object step. Whenever there is an error in any Fields with a particular name, its ErrorMessage of that particular name will be displayed. So far this formik package is coming in handy for while validating forms. Still I’m facing some issues while validating the email input. My current email validation accepts values which contains multiple domain name, IP addresses which are not allowed in actual valid Email.

I tried my best in writing my first blog. Please feel free to give your valuable suggestions for improving my blog wiring skills and ways to easily validate an email input.