React Bootstrap Form Validation (original) (raw)

Last Updated : 24 Jul, 2024

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 fields */} Submit

**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 therequiredmodule 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 ( <Col md={{ span: 6, offset: 3, }} > <h1 style={{ color: "green", }} > GeeksforGeeks

React Bootstrap Form Validation

<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> Submit ); }; 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: