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 foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldernameStep 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.
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 startOutput: Now open your browser and go to http://localhost:3000/, you will see the following output: