In this tutorial, we will see forms validation in react with bootstrap 5. We will see forms validation component, forms validation success and error using react bootstrap 5.
Install & Setup Vite + React + Typescript + Bootstrap 5
React Bootstrap 5 Forms Validation Example
1. Create simple react bootstrap forms validation using react-bootstrap InputGroup, Form, Form.Label, Form.Control component.
import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import InputGroup from "react-bootstrap/InputGroup";
import Row from "react-bootstrap/Row";
export default function FormsValidation() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Row className="mb-3">
<Form.Group as={Col} md="4" controlId="validationCustom01">
<Form.Label>First name</Form.Label>
<Form.Control
required
type="text"
placeholder="First name"
defaultValue="Mark"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustom02">
<Form.Label>Last name</Form.Label>
<Form.Control
required
type="text"
placeholder="Last name"
defaultValue="Otto"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustomUsername">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
required
/>
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group as={Col} md="6" controlId="validationCustom03">
<Form.Label>City</Form.Label>
<Form.Control type="text" placeholder="City" required />
<Form.Control.Feedback type="invalid">
Please provide a valid city.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom04">
<Form.Label>State</Form.Label>
<Form.Control type="text" placeholder="State" required />
<Form.Control.Feedback type="invalid">
Please provide a valid state.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom05">
<Form.Label>Zip</Form.Label>
<Form.Control type="text" placeholder="Zip" required />
<Form.Control.Feedback type="invalid">
Please provide a valid zip.
</Form.Control.Feedback>
</Form.Group>
</Row>
<Form.Group className="mb-3">
<Form.Check
required
label="Agree to terms and conditions"
feedback="You must agree before submitting."
feedbackType="invalid"
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
);
}
react bootstrap 5 forms validation
2. react bootstrap forms validation using react-bootstrap with Formik.
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row';
import { Formik } from 'formik';
import * as Yup from 'yup';
const schema = Yup.object().shape({
firstName: Yup.string().required(),
lastName: Yup.string().required(),
username: Yup.string().required(),
city: Yup.string().required(),
state: Yup.string().required(),
zip: Yup.string().required(),
terms: Yup.bool().required().oneOf([true], 'Terms must be accepted'),
});
export default function FormExample() {
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
firstName: 'Mark',
lastName: 'Otto',
username: '',
city: '',
state: '',
zip: '',
terms: false,
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="mb-3">
<Form.Group as={Col} md="4" controlId="validationFormik01">
<Form.Label>First name</Form.Label>
<Form.Control
type="text"
name="firstName"
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName}
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormik02">
<Form.Label>Last name</Form.Label>
<Form.Control
type="text"
name="lastName"
value={values.lastName}
onChange={handleChange}
isValid={touched.lastName && !errors.lastName}
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormikUsername">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name="username"
value={values.username}
onChange={handleChange}
isInvalid={!!errors.username}
/>
<Form.Control.Feedback type="invalid">
{errors.username}
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group as={Col} md="6" controlId="validationFormik03">
<Form.Label>City</Form.Label>
<Form.Control
type="text"
placeholder="City"
name="city"
value={values.city}
onChange={handleChange}
isInvalid={!!errors.city}
/>
<Form.Control.Feedback type="invalid">
{errors.city}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik04">
<Form.Label>State</Form.Label>
<Form.Control
type="text"
placeholder="State"
name="state"
value={values.state}
onChange={handleChange}
isInvalid={!!errors.state}
/>
<Form.Control.Feedback type="invalid">
{errors.state}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik05">
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
placeholder="Zip"
name="zip"
value={values.zip}
onChange={handleChange}
isInvalid={!!errors.zip}
/>
<Form.Control.Feedback type="invalid">
{errors.zip}
</Form.Control.Feedback>
</Form.Group>
</Row>
<Form.Group className="mb-3">
<Form.Check
required
name="terms"
label="Agree to terms and conditions"
onChange={handleChange}
isInvalid={!!errors.terms}
feedback={errors.terms}
feedbackType="invalid"
id="validationFormik0"
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
)}
</Formik>
);
}
3. react bootstrap forms validation tooltips using react-bootstrap with Formik.
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row';
import { Formik } from 'formik';
import * as Yup from 'yup';
const schema = Yup.object().shape({
firstName: Yup.string().required(),
lastName: Yup.string().required(),
username: Yup.string().required(),
city: Yup.string().required(),
state: Yup.string().required(),
zip: Yup.string().required(),
file: Yup.mixed().required(),
terms: Yup.bool().required().oneOf([true], 'terms must be accepted'),
});
export default function FormExample() {
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
firstName: 'Mark',
lastName: 'Otto',
username: '',
city: '',
state: '',
zip: '',
file: null,
terms: false,
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Row className="mb-3">
<Form.Group
as={Col}
md="4"
controlId="validationFormik101"
className="position-relative"
>
<Form.Label>First name</Form.Label>
<Form.Control
type="text"
name="firstName"
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName}
/>
<Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group
as={Col}
md="4"
controlId="validationFormik102"
className="position-relative"
>
<Form.Label>Last name</Form.Label>
<Form.Control
type="text"
name="lastName"
value={values.lastName}
onChange={handleChange}
isValid={touched.lastName && !errors.lastName}
/>
<Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormikUsername2">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name="username"
value={values.username}
onChange={handleChange}
isInvalid={!!errors.username}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.username}
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group
as={Col}
md="6"
controlId="validationFormik103"
className="position-relative"
>
<Form.Label>City</Form.Label>
<Form.Control
type="text"
placeholder="City"
name="city"
value={values.city}
onChange={handleChange}
isInvalid={!!errors.city}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.city}
</Form.Control.Feedback>
</Form.Group>
<Form.Group
as={Col}
md="3"
controlId="validationFormik104"
className="position-relative"
>
<Form.Label>State</Form.Label>
<Form.Control
type="text"
placeholder="State"
name="state"
value={values.state}
onChange={handleChange}
isInvalid={!!errors.state}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.state}
</Form.Control.Feedback>
</Form.Group>
<Form.Group
as={Col}
md="3"
controlId="validationFormik105"
className="position-relative"
>
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
placeholder="Zip"
name="zip"
value={values.zip}
onChange={handleChange}
isInvalid={!!errors.zip}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.zip}
</Form.Control.Feedback>
</Form.Group>
</Row>
<Form.Group className="position-relative mb-3">
<Form.Label>File</Form.Label>
<Form.Control
type="file"
required
name="file"
onChange={handleChange}
isInvalid={!!errors.file}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.file}
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="position-relative mb-3">
<Form.Check
required
name="terms"
label="Agree to terms and conditions"
onChange={handleChange}
isInvalid={!!errors.terms}
feedback={errors.terms}
feedbackType="invalid"
id="validationFormik106"
feedbackTooltip
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
)}
</Formik>
);
}
react bootstrap 5 form validation with formik
