Search⌘ K
Home
Courses
Modern Web Design Using Bootstrap 5 with Hands-On Projects

Validation

Learn how to add Bootstrap custom validation to forms.

We'll cover the following...

Bootstrap provides custom validation while working with forms. Let's take a look at an example in which we’ll check whether the form is complete or not when submitted by the user.

Example

In the following example, try to submit the form and check the response.

    Form validation

    Let's take a look at the code implementation below.

    HTML
    <body>
        <div class="container  mt-2">
            <!-- form requires additional class needs-validation  -->
            <!-- novalidate is used to prevent HTML default validation  -->
            <form class="row g-3 needs-validation" novalidate>
                <div class="col-md-4">
                    <label for="validationCustom01" class="form-label">Name</label>
                    <input type="text" class="form-control" id="validationCustom01" value="Steve Scott" required>
                    <!-- valid feedback response  -->
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="validationEmail" class="form-label">Email</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="validationEmail" required>
                        <span class="input-group-text">gmail.com</span>
                        <!-- invalid feedback response  -->
                        <div class="invalid-feedback">
                            Please provide us with your email.
                        </div>
                        <!-- valid feedback response  -->
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                        <label class="form-check-label" for="invalidCheck">
                            Agree to terms and conditions
                        </label>
                        <div class="invalid-feedback">
                            You must agree before submitting.
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
            </form>
        </div>
    </body>

    In the code implementation above, on line 6, we use the ...