React Bootstrap Form Validation

In Web Application Development, React-Bootstrap is the framework that helps to develop web pages in a more attractive form. While developing the application, we designed input fields and forms that need to be validated to maintain security. So, we can do this by using React Bootstrap Form Validation. In this article, we will see the Syntax, Properties, and practical examples.

Syntax:

<Form noValidate validated={validated} 
             onSubmit={ValidateFn}>
      {/* Form fields */}
      <Button type="submit">Submit</Button>
</Form>

Properties:

• validated: This property specifies whether the form has been validated or not. We can set the value to true which indicates the display of validation feedback.
• noValidate: This property mainly prevents browser validation. This property is mostly useful when we are using custom validation in React.
• onSubmit: This is the callback function that is triggered when the form is submitted.
• checkValidity: This is the function that checks if all its child elements are valid.
• validated: This property indicates whether the user has interacted with the control and its value is valid.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap 
npm install bootstrap

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.2",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import React, { useState } from "react";
import { Form, Button, Container, Row, Col } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
const App = () => {
    const [validated, set_Validated] = useState(false);
    const [form_Data, set_Form_Data] = useState({
        user: "",
        pass: "",
        confimPass: "",
        email: "",
        phoneNo: "",
    });
    const submitFn = (event) => {
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        set_Validated(true);
    };
    const chngFn = (event) => {
        const { name, value } = event.target;
        set_Form_Data({
            ...form_Data,
            [name]: value,
        });
    };
    return (
        <Container className="mt-5">
            <Row>
                <Col
                    md={{
                        span: 6,
                        offset: 3,
                    }}
                >
                    <h1
                        style={{
                            color: "green",
                        }}
                    >
                        GeeksforGeeks
                    </h1>
                    <h3>React Bootstrap Form Validation</h3>
                    <Form noValidate validated={validated} onSubmit={submitFn}>
                        <Form.Group controlId="username">
                            <Form.Label>Username</Form.Label>
                            <Form.Control
                                type="text"
                                name="user"
                                value={form_Data.user}
                                onChange={chngFn}
                                pattern="^[a-zA-Z0-9]+$"
                                required
                                isInvalid={
                                    validated &&
                                    !/^[a-zA-Z0-9]+$/.test(form_Data.user)
                                }
                            />
                            <Form.Control.Feedback type="invalid">
                                Please enter a valid username (alphanumeric
                                characters only).
                            </Form.Control.Feedback>
                        </Form.Group>
                        <Form.Group controlId="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control
                                type="password"
                                name="pass"
                                value={form_Data.pass}
                                onChange={chngFn}
                                minLength={6}
                                required
                                isInvalid={
                                    validated && form_Data.pass.length < 6
                                }
                            />
                            <Form.Control.Feedback type="invalid">
                                Password must be at least 6 characters long.
                            </Form.Control.Feedback>
                        </Form.Group>
                        <Form.Group controlId="confirmPassword">
                            <Form.Label>Confirm Password</Form.Label>
                            <Form.Control
                                type="password"
                                name="confimPass"
                                value={form_Data.confimPass}
                                onChange={chngFn}
                                minLength={6}
                                required
                                pattern={form_Data.pass}
                                isInvalid={
                                    validated &&
                                    form_Data.confimPass !== form_Data.pass
                                }
                            />
                            <Form.Control.Feedback type="invalid">
                                Passwords do not match.
                            </Form.Control.Feedback>
                        </Form.Group>
                        <Form.Group controlId="email">
                            <Form.Label>Email</Form.Label>
                            <Form.Control
                                type="email"
                                name="email"
                                value={form_Data.email}
                                onChange={chngFn}
                                required
                                isInvalid={
                                    validated &&
                                    !/^\S+@\S+\.\S+$/.test(form_Data.email)
                                }
                            />
                            <Form.Control.Feedback type="invalid">
                                Please enter a valid email address.
                            </Form.Control.Feedback>
                        </Form.Group>
                        <Form.Group controlId="phoneNumber">
                            <Form.Label>Phone Number</Form.Label>
                            <Form.Control
                                type="number"
                                name="phoneNo"
                                value={form_Data.phoneNo}
                                onChange={chngFn}
                                pattern="^\d{10}$"
                                required
                                isInvalid={
                                    validated &&
                                    !/^\d{10}$/.test(form_Data.phoneNo)
                                }
                            />
                            <Form.Control.Feedback type="invalid">
                                Please enter a valid 10-digit phone number.
                            </Form.Control.Feedback>
                        </Form.Group>
                        <Button type="submit">Submit</Button>
                    </Form>
                </Col>
            </Row>
        </Container>
    );
};
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: