Form Validations using React-Bootstrap, Formik and Yup

Recently I was working with React Bootstrap forms, and I wanted to add validations, so I am sharing the code you can use to hookup Formik and also utilizing Yup to add schema based validations to your React-Bootstrap forms. I could not find much resource building the same, hope you find it easy now.

React-Bootstrap Form validations with formik

 import { ErrorMessage, Field, Formik } from 'formik';
import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
const Register = () => {
<Formik
                initialValues={{
                    username: '',
                    first_name: '',
                    last_name: '',
                    email: '',
                    password: '',
                    password2: ''
                }}
                validate={values => {
                    const errors={};
                    if(!values.username){
                        errors.username = 'Username is required';
                    }
                    if(!values.first_name){
                        errors.first_name = 'First Name is required';
                    } else if (values.first_name.length > 15) {
                errors.first_name = 'Must be 15 characters or less';
           }
                    if(!values.last_name){
                        errors.last_name = 'Last Name is required';
                    }
                    if(!values.email){
                        errors.email = 'Email is required';
                    }else if (!/^[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {    
               errors.email = 'Invalid email address';
         }
                    if(!values.password){
                        errors.password = 'Password is required';
                    }
                    if(!values.password2){
                        errors.password2 = 'Please Confirm Password';
                    }
                    return errors;
                }}
                onSubmit={values => {
                    if(values.username && values.first_name && values.last_name && values.email && values.password && values.password2){
                        console.log('form submitted!!')
                    }
                }}>

                {({handleChange, handleSubmit, handleBlur, values, errors, touched }) => (
                    <Form>
                        <Field
                            name="username"
                            render={({field, formProps}) => (
                                <Form.Group controlId="username">
                                  <Form.Label> Username</Form.Label>
                                  <Form.Control type={'text'} value={field.value} onChange={handleChange} />

                                     {/* {errors.username && touched.username && errors.username} */}
                                     <ErrorMessage name="username"  render={msg => <Card border="danger">{msg} </Card>} />
                                </Form.Group>
                            )}
                        />
                         <Form.Row>
                            <Col>
                                <Field
                                    name="first_name"
                                    render={({field, formProps}) => (
                                        <Form.Group controlId="first_name">
                                            <Form.Label> First Name </Form.Label>
                                            <Form.Control type={'text'} value={field.value} onChange={handleChange} />
                                            <ErrorMessage name="first_name"  render={msg => <Card border="danger">{msg} </Card>} />
                                        </Form.Group>
                                    )}
                                />
                            </Col>
                            <Col>
                               <Field
                                    name="last_name"
                                    render={({field, formProps}) => (
                                        <Form.Group controlId="last_name">
                                            <Form.Label> Last Name </Form.Label>
                                            <Form.Control type={'text'} value={field.value} onChange={handleChange} />
                                            <ErrorMessage name="last_name"  render={msg => <Card border="danger">{msg} </Card>} />
                                        </Form.Group>
                                    )}
                                />
                            </Col>
                         </Form.Row>
                        <Field
                            name="email"
                            render={({field, formProps}) => (
                                <Form.Group controlId="email">
                                    <Form.Label> Email Address</Form.Label>
                                    <Form.Control type={'email'} value={field.value} onChange={handleChange} />
                                    <ErrorMessage name="email" render={msg => <Card border="danger">{msg}</Card>} />
                                </Form.Group>
                            )}
                        />
                        <Field
                            name="password"
                            render={({field, formProps}) => (
                                <Form.Group controlId="password">
                                    <Form.Label> Password</Form.Label>
                                    <Form.Control type={'password'} value={field.value} onChange={handleChange} />
                                    <ErrorMessage name="password" render={msg => <Card border="danger">{msg}</Card>} />
                                </Form.Group>
                            )}
                        />
                         <Field
                            name="password2"
                            render={({field, formProps}) => (
                                <Form.Group controlId="password2">
                                    <Form.Label> Confirm Password</Form.Label>
                                    <Form.Control type={'password'} value={field.value} onChange={handleChange} />
                                    <ErrorMessage name="password2" render={msg => <Card border="danger">{msg}</Card>} />
                                </Form.Group>
                            )}
                        />

                        <Button type="submit" onClick={handleSubmit}>
                            Register
                         </Button>
                    </Form>
                )}
             </Formik>

</Container>
)
export default Register;

React Bootstrap Form Validations using Formik and Yup

So, lets add Yup Validations to our form, it might change the structure a bit

 import { ErrorMessage, Field, Formik } from 'formik';
import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
import * as Yup from 'yup';
 // validations using yup
const registerValidationsSchema = Yup.object({
username: Yup.string()
.max(20, 'Must be 20 characters or less')
.required('Required'),
first_name: Yup.string()
.max(15, 'Must be 15 characters or less')
.required('Required'),
last_name: Yup.string()
.max(20, 'Must be 20 characters or less')
.required('Required'),
email: Yup.string().email('Invalid email address').required('Required'),
password: Yup.string()
.max(8, 'Must be 8 characters or less')
.required('Required'),
password2: Yup.string()
.max(8, 'Must be 8 characters or less')
.required('Required')
}); 

const Register = () => (
        
<Formik
           initialValues = {{
            username: '',
            first_name: '',
            last_name: '',
            email: '',
            password: '',
            password2: ''
         }}
         validationSchema={registerValidationsSchema}
         onSubmit={values => {
                    console.log('values', values);
            }}
         >
        {props => (
            <Form onSubmit={props.handleSubmit}>
                <Field name="username">
                    {({field, form, meta}) => (
                         <Form.Group controlId="username">
                         <Form.Label> Username</Form.Label>
                               <Form.Control
                                  type={'text'}
                                  value={field.value}
                                  onChange={props.handleChange}
                                  onBlur={props.handleBlur}
                                  />
                                  {/* {errors.username && touched.username && errors.username} */}
                                  <ErrorMessage name="username"  render={msg => <Card border="danger">{msg} </Card>} />
                          </Form.Group>
                    )}
                </Field>
                <Form.Row>
                    <Field name="first_name">
                       {({field, form, meta}) => (
                            <Col>
                                <Form.Group controlId="first_name">
                                    <Form.Label> First Name </Form.Label>
                                    <Form.Control type={'text'} value={field.value} onChange={props.handleChange} onBlur={props.handleBlur} />
                                    <ErrorMessage name="first_name"  render={msg => <Card border="danger">{msg} </Card>} />
                                </Form.Group>
                            </Col>
                       )}
                    </Field>
                    <Field name="last_name">
                         {({field, form, meta}) => (
                            <Col>
                                 <Form.Group controlId="last_name">
                                     <Form.Label> Last Name </Form.Label>
                                     <Form.Control type={'text'} value={field.value} onChange={props.handleChange} onBlur={props.handleBlur} />
                                     <ErrorMessage name="last_name"  render={msg => <Card border="danger">{msg} </Card>} />
                                 </Form.Group>
                            </Col>
                         )}
                    </Field>
                 </Form.Row>
                  <Field name="email">
                        {({field, form, meta}) => (
                            <Form.Group controlId="email">
                                <Form.Label> Email Address</Form.Label>
                                <Form.Control type={'email'} value={field.value} onChange={props.handleChange} onBlur={props.handleBlur} />
                                <ErrorMessage name="email" render={msg => <Card border="danger">{msg}</Card>} />
                            </Form.Group>
                        )}
                 </Field>
                 <Form.Row>
                    <Field name="password">
                        {({field, form, meta}) => (
                         <Col>
                            <Form.Group controlId="password">
                               <Form.Label> Password</Form.Label>
                               <Form.Control type={'password'} value={field.value} onChange={props.handleChange} onBlur={props.handleBlur} />
                               <ErrorMessage name="password" render={msg => <Card border="danger">{msg}</Card>} />
                           </Form.Group>
                         </Col>
                        )}
                    </Field>
                    <Field name="password2">
                        {({field, form, meta}) => (
                          <Col>
                            <Form.Group controlId="password2">
                                <Form.Label> Confirm Password</Form.Label>
                                <Form.Control type={'password'} value={field.value} onChange={props.handleChange} onBlur={props.handleBlur} />
                                <ErrorMessage name="password2" render={msg => <Card border="danger">{msg}</Card>} />
                            </Form.Group>
                            </Col>
                        )}
                    </Field>
                </Form.Row>
                <Button type="submit">
                  Register
               </Button>
            </Form>
        )}
        </Formik>


        </Col>
    </Row>
</Container>
)
export default Register;

to customize further, you can add feedback for forms fields :

 <Field name="username">
                        {({field, form, meta}) => (
                             <Form.Group controlId="username">
                             <Form.Label> Username</Form.Label>
                                   <Form.Control
                                      type={'text'}
                                      placeholder="Enter username"
                                      value={field.value}
                                      onChange={props.handleChange}
                                      onBlur={props.handleBlur}
                                      isInvalid={!!props.errors.username}
                                      required
                                      />
                                      <Form.Control.Feedback type="invalid">
                                           {props.errors.username && props.touched.username && props.errors.username}
                                      </Form.Control.Feedback>
                                      {/* {errors.username && touched.username && errors.username} */}
                                      {/* <ErrorMessage name="username"  render={msg => <Card border="danger">{msg} </Card>} /> */}
                              </Form.Group>
                        )}
                    </Field>
form-validations

now let’s test our form

The form is working fine !

Thanks for reading ! Stay Tuned for more.

Scroll to Top