Bootstrap Module 34

  Module 34 Forms – Validation & Custom Controls. 

1. Understanding Forms in Bootstrap

What is a Form?

A form is a structured set of input controls used to collect data from users.

               

Common form elements:

Text inputs

Email fields

Passwords

Checkboxes

Radio buttons

Select dropdowns

File uploads

Bootstrap provides pre-styled form that improve:

Consistency

Responsiveness

Accessibility

Validation feedback

2. Bootstrap Form Validation – Concept

What is Form Validation?

Form validation ensures:

Correct data format

Required fields are filled

Invalid data is rejected before submission

Types of Validation

Client-side validation

Runs in the browser

Faster feedback

Uses HTML5 + Bootstrap + JavaScript

Server-side validation

Runs on the server

More secure

Outside Bootstrap’s scope but complements it

3. Bootstrap Validation 

Bootstrap builds on HTML5 validation using CSS classes:

Class

Purpose

.needs-validation

Activates Bootstrap validation

.was-validated

Shows validation results

.is-valid

Marks valid input

.is-invalid

Marks invalid input

.valid-feedback

Success message

.invalid-feedback

Error message

👉 Bootstrap does not validate automatically – you must trigger it using JavaScript.

4. Basic Form Validation

Step 1: HTML Form Structure

<form class="needs-validation" novalidate> <div class="mb-3"> <label class="form-label">Email</label> <input type="email" class="form-control" required> <div class="invalid-feedback"> Please enter a valid email address. </div> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>

Explanation

required → HTML5 validation rule

novalidate → disables browser default validation UI

.invalid-feedback → Bootstrap error message container

Step 2: JavaScript to Activate Validation

<script> (() => { 'use strict'; 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'); }, false); }); })(); </script>

Deep Explanation

checkValidity() → checks all form fields

preventDefault() → stops form submission

.was-validated → triggers Bootstrap validation styles

5. Validation States – Visual Feedback

Valid State

<input type="text" class="form-control is-valid"> <div class="valid-feedback"> Looks good! </div>

Invalid State

<input type="text" class="form-control is-invalid"> <div class="invalid-feedback"> This field is required. </div>

 Tip

 how visual cues (green/red borders) improve UX and reduce form abandonment.

6. Custom Form Controls 

Why Custom Controls?

Default browser controls:

Look different across browsers

Offer limited styling

Bootstrap custom controls provide:

Uniform design

Better accessibility

Mobile-friendly UI

7. Custom Checkboxes & Radios

Custom Checkbox

<div class="form-check"> <input class="form-check-input" type="checkbox" id="terms" required> <label class="form-check-label" for="terms"> Accept Terms & Conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div>

Explanation

.form-check → wrapper

.form-check-input → input styling

.form-check-label → clickable label

Custom Radio Buttons

<div class="form-check"> <input class="form-check-input" type="radio" name="gender" required> <label class="form-check-label">Male</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gender"> <label class="form-check-label">Female</label> </div>

8. Custom Select Dropdown

<select class="form-select" required> <option value="">Choose a country</option> <option>India</option> <option>USA</option> <option>UK</option> </select> <div class="invalid-feedback"> Please select a country. </div>

Key Difference

.form-select replaces default <select> styling

Fully responsive and keyboard-accessible

9. Custom Switches (Modern UI)

<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="notify"> <label class="form-check-label" for="notify"> Enable Notifications </label> </div>

Use Case

Settings panels

Mobile-first designs

Toggle features

10. Registration Form

Features Included

Email validation

Password required

Terms checkbox

Bootstrap validation feedback

<form class="needs-validation" novalidate> <input type="email" class="form-control mb-3" placeholder="Email" required> <input type="password" class="form-control mb-3" placeholder="Password" required> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" required> <label class="form-check-label">Agree to terms</label> <div class="invalid-feedback">Required</div> </div> <button class="btn btn-success">Register</button> </form>

11. Exercises 

Exercise 1 

Create a login form with:

Email

Password

Validation messages

Exercise 2 

Build a feedback form with:

Textarea

Rating (radio buttons)

Submit validation

Exercise 3 

Create a multi-step form:

Step 1: Personal info

Step 2: Preferences

Step 3: Confirmation

12. Research 

UX Insights

Forms with inline validation reduce errors by 22%

Clear feedback improves completion rates

Minimal required fields = better conversion

Accessibility 

Always use <label>

Ensure keyboard navigation

Use .invalid-feedback for screen readers

Industry Usage

Bootstrap validation is widely used in:

Admin dashboards

E-commerce checkouts

SaaS onboarding forms

13. Common Mistakes 

❌ Forgetting novalidate

❌ No feedback messages

❌ Over-validating simple forms

❌ Ignoring mobile usability

Summary

Bootstrap validation enhances UX + data quality

                

Custom controls provide professional UI

JavaScript enables feedback

Accessibility and consistency are key goals