Form Validation is used to form fields required by some rules and regulations. Bootstrap has multiple classes to create a form. But validation needs to control data about form. In this subject, we are going to discover Bootstrap Form Validation.
For example, the form has a username and password. Username and password have many rules according to requirements. username must be in smaller case or uppercase and smaller and upper both can be required at the same time. Password requires letters, several require numeric, otherwise, many required any special characters. The user understands the presence of the condition, validation is essential.
Periodically the user does not get the actual need of the form or how much is required to meet, that time validation is useful to submit data perfectly. If you do not complete the requirements then you get the feedback in the form automatically.
Read Also: What Is Bootstrap Input Type
How to Validate Forms with Bootstrap?
- Bootstrap form creates validation overcomes all difficulties of JavaScript coding and works easily with classes.
- The Bootstrap form validation reaches with some glyphicon to fetch the notice of error, warning, and success. Validation classes are always determined in the parent class.
- Along with validation classes, it also needs the has-feedback class to get the icon in the right place in the form input box along with the label. This class was placed in the parent class.
Example of Bootstrap Form Validation
First of all, Install Bootstrap by using CDN.
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head>
In the same HTML file, you can add the above CDN in your HTML file to get the final result.
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container mt-3">
<h3>Form Validation Bootstrap 5</h3>
<form action="#" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid username.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Email:</label>
<input type="Email" class="form-control" id="pwd" placeholder="Enter Email" name="pswd" required>
<div class="valid-feedback">Email is Valid.</div>
<div class="invalid-feedback">Please Input Valid Email</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="Password" class="form-control" id="pwd" placeholder="Enter Password" name="pswd" required>
<div class="valid-feedback">Valid Password.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I agree on Terms & Conditions.</label>
<div class="valid-feedback">You agreed our terms and conditions.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>Conclusion
Especially form validation appears on the server-side to control data of form in a database. For those objectives, we get multiple complex coding and use the validation method using JavaScript language. Bootstrap accomplished all things in one form page bypassing difficulties and lengthy coding and controlling the form data lightly.