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.

Table of Content

Using Bootstrap Classes
Using JavaScript

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.

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:

Bootstrap Form Validation using JavaScript

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:

How to create bootstrap panel with footer ?

heysaiyad

Improve

Article Tags :

How to Create a Bootstrap Form Validation ?

Bootstrap Form Validation using Bootstrap Classes

Bootstrap Form Validation using JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?