How to Create a Bootstrap Form Validation ?
Last Updated :
09 Apr, 2024
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.
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.
HTML
<!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:
.gif)
Output
Bootstrap classes like “form-control” are used for input styling, and “btn btn-success” styles the submit button. JavaScript is employed to handle form validation. The script listens for form submissions, prevents default behavior enhancing user experience by dynamically validating inputs and displaying feedback messages without page reloads.
Example: Creating a Bootstrap Form Validation using Bootstrap Classes and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Form Validation</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 class="needs-validation" novalidate>
<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 enter 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 enter 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 enter a valid password.
</div>
</div>
<button class="btn btn-success"
type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
<script>
// Example using JavaScript
(function () {
'use strict';
window.addEventListener('load', function () {
let forms = document
.getElementsByClassName('needs-validation');
let validation = Array.prototype
.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
Output:
Output
Share your thoughts in the comments
Please Login to comment...