Form Validation
-
Implement form validation using Bootstrap validation utilities.
Introduction to Form Validation
Form validation is the process of checking user input before it is accepted or processed.
Validation ensures that:
Required fields are filled
Data format is correct
Invalid or harmful data is rejected
In Bootstrap, validation is visual and structural, not logical by default.
Bootstrap does not validate data by itself — it styles validation feedback.What Is Validation ?
Validation answers questions like:
Is the field empty ?
Is the email format correct ?
Is the password length valid ?
Is the user input acceptable ?
Validation improves:
Data accuracy
User experience
Security
Form success rate
Types of Validation
There are two main types of validation:
Client-side validation
Server-side validation
Both are required in real applications.
Client-side Validation
What Is Client-side Validation ?
Client-side validation happens:
In the browser
Before form submission
Without sending data to the server
It uses:
HTML attributes
JavaScript
Bootstrap validation classes
Why Client-side Validation Is Important
Client-side validation:
Gives instant feedback
Improves user experience
Reduces unnecessary server requests
Helps users correct mistakes quickly
Client-side validation is not secure by itself.
HTML Validation Attributes
HTML provides built-in validation attributes.
Using Built-In HTML Validation in Forms
The required attribute enables basic browser validation before form submission.
<input type="email" class="form-control" required>Common attributes:
required
type="email"
minlength
maxlength
pattern
These attributes trigger browser validation.
Bootstrap Validation Classes
Bootstrap uses these classes to style validation states:
Class Purpose .is-valid Valid input .is-invalid Invalid input .valid-feedback Success message .invalid-feedback Error message
Implementing Bootstrap Form Validation
Bootstrap validation uses .needs-validation, valid-feedback, and invalid-feedback classes to show validation messages.
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>Explanation:
.needs-validation → enables Bootstrap validation styling
novalidate → disables browser default UI
Feedback messages appear based on validity
Activating Client-Side Validation with JavaScript
This script enables Bootstrap’s custom client-side validation and applies validation styles on form submission.
<script>
(() => {
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
});
});
})();
</script>What this does:
Prevents form submission if invalid
Adds .was-validated class
Shows validation feedback
Applying Validation State Classes to Inputs
The .is-invalid and .is-valid classes visually indicate input validation status.
<!-- Invalid Input -->
<input class="form-control is-invalid">
<!-- Valid Input -->
<input class="form-control is-valid">Used when:
Validation is handled manually
Dynamic validation is required
Server-side Validation
What is Server-side Validation ?
Server-side validation happens:
On the server
After form submission
Before saving or processing data
It checks:
Data integrity
Security rules
Business logic
Malicious input
Why Server-side Validation Is Mandatory
Client-side validation:
Can be bypassed
Can be disabled
Is not secure
Server-side validation:
Cannot be bypassed
Protects the system
Ensures data correctness
Never trust client-side validation alone.
Server-side Validation Flow
User submits form
Data is sent to server
Server validates input
Server returns:
Success
Errors
Client-side vs Server-side Validation
Feature Client-side Server-side Runs on Browser Server Speed Fast Slower User feedback Instant After submit Security Weak Strong Can be bypassed Yes No Required Helpful Mandatory Both must be used together.
Best Practices for Form Validation
Always validate on the server
Use client-side validation for UX
Keep error messages clear
Do not expose sensitive logic
Validate all user input
Never rely on frontend only
Common Mistakes
Assuming Bootstrap validates data
Skipping server-side validation
Using alerts instead of inline feedback
Not disabling browser default UI
Showing vague error messages