Bootstrap Form Validation using Bootstrap Classes
Bootstrap’s predefined CSS classes are used for form validation in this approach. Bootstrap’s predefined classes include “form-group” to structure form elements, “form-control” for input styling, “valid-feedback” for success messages, and “invalid-feedback” for error messages.
Example: Creating a Bootstrap Form Validation using Bootstrap Classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Form Validation with Bootstrap</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3 class="text-center text-success">
Form Validation with Bootstrap
</h3>
<form>
<div class="row justify-content-center">
<div class="col-6">
<div class="form-group">
<label for="name">Name:</label>
<input type="text"
class="form-control
form-control-sm"
id="name"
placeholder="Enter your name"
required>
<div class="valid-feedback">
Valid name!
</div>
<div class="invalid-feedback">
Please provide a valid name.
</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email"
class="form-control
form-control-sm"
id="email"
placeholder="Enter your email"
required>
<div class="valid-feedback">
Valid email!
</div>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="form-group">
<label for="password">
Password:
</label>
<input type="password"
class="form-control
form-control-sm"
id="password"
placeholder="Enter your password"
required>
<div class="valid-feedback">
Valid password!
</div>
<div class="invalid-feedback">
Please provide a valid password.
</div>
</div>
<button type="submit"
class="btn btn-success">
Submit
</button>
</div>
</div>
</form>
</div>
</body>
</html>
Output:
Output
How to Create a Bootstrap Form Validation ?
A Bootstrap Form Validation ensures that user input complies with established standards before submission, improves the user experience, and minimizes server-side processing for incorrect inputs. We can add client-side validation to their forms by using two different methods including Bootstrap built-in classes and JavaScript.
Table of Content
- Using Bootstrap Classes
- Using JavaScript