Mastering Form Validation in Bootstrap

Form Validation

Bootstrap provides built-in validation styles for error, warning, and success states in forms.

– Client-side Validation: Use HTML5 and CSS to provide immediate feedback on the validity of form inputs.
– Server-side Validation: Style forms based on feedback from server-side processing.

<label for=”validationCustom01″>First name</label>

Please provide a valid first name.

</div>

<!– Additional validated elements –>

</form>

Real Example: Bootstrap Registration Form

<!DOCTYPE html>

<head>

<title>Bootstrap Registration Form</title>

</head>

<body>

<h2>Registration Form</h2>

<form>

<!– Name Field –>

</div>

<!– Email Field –>

<label for=”email”>Email address</label>

</div>

<!– Password Field –>

<label for=”password”>Password</label>

</div>

<!– Submit Button –>

<button type=”submit” class=”btn btn-primary”>Submit</button>

</form>

</div>

</body>

</html>

Explanation

HTML Structure: The form is enclosed within a div with the class container, which is a Bootstrap class for a fixed-width centered container. The mt-5 class adds margin-top for spacing.

Form Title: The <h2> tag represents the title of the form.

Form Element: The <form> tag is the container for the form elements.

Form Groups:

Each input field is wrapped in a div with the class form-group. This Bootstrap class provides proper spacing and alignment.

Inside each form-group, there are two elements: a <label> and an <input>.

Input Fields:

The id attribute of each input field matches the for attribute of its corresponding label for accessibility.

The class form-control is a Bootstrap class that styles the form elements uniformly and responsively.

placeholder attribute provides a text hint inside the input fields.

Submit Button:

A <button> of type submit is used to submit the form.

The class btn btn-primary styles the button with Bootstrap’s primary button styling.

Bootstrap and JavaScript Links:

The Bootstrap CSS link is included in the <head> section.

JavaScript links for jQuery, Popper.js, and Bootstrap’s JS are included before the closing </body> tag. These are necessary for Bootstrap’s JavaScript components to function.

This code creates a simple yet elegant registration form using Bootstrap, showcasing the ease and efficiency of using Bootstrap for form design. The form is not only visually appealing but also responsive, ensuring a good user experience on different devices.

Example: Responsive Two-Column Bootstrap Form

<!DOCTYPE html>

<head>

<title>Responsive Bootstrap Form</title>

</head>

<body>

<h2>Responsive Registration Form</h2>

<form>

<!– First Name Field –>

<label for=”firstName”>First Name</label>

</div>

<!– Last Name Field –>

</div>

<!– Email Field –>

<label for=”email”>Email</label>

</div>

<!– Phone Field –>

<label for=”phone”>Phone</label>

</div>

<!– Address Field –>

<label for=”address”>Address</label>

</div>

<!– Submit Button –>

<button type=”submit” class=”btn btn-primary”>Register</button>

</form>

</div>

</body>

</html>

Explanation

Form Row and Columns:

The form is divided into rows using <div class=”form-row”>.

Each row contains columns defined by <div class=”form-group col-md-6″>. The col-md-6 class means each column takes up half the width on medium-sized screens and larger, creating a two-column layout.

First Name and Last Name Fields:

Located in the first row, each occupying half the width of the row.

Email and Phone Fields:

The second row follows the same two-column layout, with email and phone number inputs.

Address Field:

The Address field is outside the two-column structure, allowing it to span the full width of the form. It is placed inside its own form-group for proper spacing.

Responsive Design:

The col-md-6 class ensures that on medium-sized screens and larger, the input fields are displayed in two columns. On smaller screens, these fields will stack vertically for a better mobile experience.

Submit Button:

A single, full-width button is placed below the address field.

This form layout is both functional and responsive, ensuring a good user experience on all device sizes. The use of Bootstrap’s grid system allows for flexibility in the form design, adapting seamlessly to different screen sizes.

Example : Bootstrap Form Validation Example

<!DOCTYPE html>

<head>

<title>Bootstrap Form Validation</title>

</head>

<body>

<h2>Bootstrap Form with Validation</h2>

<!– Name Field –>

Please enter a name.

</div>

<!– Email Field –>

<label for=”validationCustom02″>Email</label>

Please enter a valid email.

</div>

<!– Submit Button –>

<button class=”btn btn-primary” type=”submit”>Submit</button>

</form>

</div>

// JavaScript for disabling form submissions if there are invalid fields

(function() {

‘use strict’;

window.addEventListener(‘load’, function() {

var forms = document.getElementsByClassName(‘needs-validation’);

var 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>

Explanation

– Form with Validation Class: The form element has a class needs-validation and an attribute novalidate to disable the browser’s default validation.

Input Fields with Validation:

Each input field has the required attribute, making it a mandatory field.

The invalid-feedback class is used to show the validation message when the input is invalid.

JavaScript for Validation:

The script at the bottom is essential for Bootstrap’s custom validation to work. It prevents form submission if any of the fields are invalid.

The was-validated class is added to the form on submission to trigger the validation states.

Styling and Structure:

Bootstrap’s CSS classes are used to style the form and its elements.

The form is wrapped in a container class for proper alignment and spacing.

This example demonstrates a simple form with validation using Bootstrap. When the user tries to submit the form without filling out the required fields, the form will display the appropriate validation messages. This ensures that the user inputs all necessary information correctly.

Class	Description
.text-start	Aligns text to the start (left in LTR, right in RTL).
.text-center	Centers the text.
.text-end	Aligns text to the end (right in LTR, left in RTL).
.text-sm-start	Aligns text to the start on small screens and above.
.text-md-start	Aligns text to the start on medium screens and above.
.text-lg-start	Aligns text to the start on large screens and above.
.text-xl-start	Aligns text to the start on extra-large screens and above.

Class	Description
.text-lowercase	Transforms text to lowercase.
.text-uppercase	Transforms text to uppercase.
.text-capitalize	Capitalizes each word in the text.

Example

<p class=”text-lowercase”>Lowercased text</p>

<p class=”text-uppercase”>Uppercased text</p>

<p class=”text-capitalize”>Capitalized text</p>

Font Weight and Italicization

– Control the font weight and style with `.font-weight-normal`, `.font-weight-bold`, and `.font-italic`.

Class	Description
.font-weight-bold	Makes text bold.
.font-weight-normal	Sets text to normal weight.
.font-italic	Italicizes text.

Example

<p class=”font-weight-bold”>Bold text</p>

<p class=”font-italic”>Italicized text</p>

2. Container-fluid

Full-Width Container: .container-fluid spans 100% of the viewport width.
Behavior: It maintains full width across all viewport sizes, providing a continuous look.
Use: Perfect for designs that require an edge-to-edge layout, such as full-width image sliders.

Example of .container-fluid

<div class=”container-fluid”>

<p>This content is inside a .container-fluid, which means it will always take up 100% of the viewport’s width.</p>

</div>

Inline Elements and Abbreviations

– Style inline elements such as `<a>`, `<em>`, and `<strong>`, and use `<abbr>` for abbreviations.

Example

<a href=””>This is a hyperlink</a>

<em>This is emphasized text</em>

<strong>This is strong text</strong>

<abbr title=”Hypertext Markup Language”>HTML</abbr>

Blockquotes

– Bootstrap provides styling for blockquotes, which is useful for quoting blocks of content.

Example

<p class=”mb-0″>Lorem ipsum dolor sit amet…</p>

</blockquote>

Lists

– Unstyled, inline, and description lists are formatted easily with Bootstrap classes

Class	Description
.list-unstyled	Removes default list styling (bullets/numbers).
.list-inline	Displays list items inline.
.list-inline-item	Used on <li> elements in an inline list.

Example

<ul class=”list-unstyled”>

<li>Unstyled list item</li>

</ul>

Best Practices in Typography

– Consistency: Use Bootstrap classes to maintain consistency in typography across your website.
– Responsiveness: Utilize responsive text classes for different devices.
– Readability: Ensure text size, spacing, and color contrast are optimized for readability.

Understanding and utilizing Bootstrap’s typography classes is key to creating visually appealing and readable content. This module provides the foundational knowledge needed to effectively style text in Bootstrap-powered web designs.

YouTube Reference :

Form Validation to Bootstrap in Hindi/Urdu

BS Grid Basic

BS Typography

BS Tables

BS Images

BS Jumbotron

BS Alerts

BS Forms

BS Floating Labels

BS Form Validation

BS Buttons

BS Button Groups

BS Badges

BS Progress Bars

BS Spinnier

BS Pagination

BS List Groups

BS Cards

BS Dropdowns

BS Collapse

BS Navs

BS Navbar

BS Carousel

BS Modal

BS Tooltip

BS Panels

BS Popover

BS Toast

BS Scrollspy

BS OffCanvas

BS Utilities

BS Flex

Form Validation

Real Example: Bootstrap Registration Form

Explanation

Form Groups:

Input Fields:

Submit Button:

Example: Responsive Two-Column Bootstrap Form

Explanation

Form Row and Columns:

First Name and Last Name Fields:

Address Field:

Responsive Design:

Example : Bootstrap Form Validation Example

Explanation

Input Fields with Validation:

JavaScript for Validation:

Styling and Structure:

Example

Font Weight and Italicization

Example

2. Container-fluid

Example of .container-fluid

Inline Elements and Abbreviations

Example

Blockquotes

Example

Lists

Example

Best Practices in Typography

Social Media

Contact Us

Services

COMPANY