Open In App

Bootstrap 5 Validation Custom styles

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap5 Validation Custom styles are used to add custom styles of bootstrap5 in your code. In order to add such custom styles we will have to add a novalidate boolean attribute to our <form>. After applying this attribute when you attempt to submit the form you can see the valid and invalid style of custom styles. Using custom styles we can add a variety of styles such as colors, borders, background icons, etc. If we want to add background icons then we can use <select>, they are only available with .form-select.

Bootstrap 5 Validation Custom styles attribute:

  • novalidate: This attribute is used to disable the browser’s default feedback tooltips.

Syntax:

<form class="..." novalidate>
      ...
</form>

Example 1: let’s see an example of validation custom styles. 

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href=
</head>
  
<body class="m-3">
    <h1 class="text-success"
        GeeksforGeeks
    </h1>
    <h3>Bootstrap5 Validation Custom styles</h3>
  
    <form class="needs-validation" 
          novalidate>
        <div>
            <label class="form-label"
                Name
            </label>
            <input type="text" required>
            <section class="valid-feedback">
                Done
            </section>
        </div>
        <br>
        <div>
            <label>Role</label>
            <input type="text" required>
            <section class="valid-feedback">
                Done
            </section>
        </div>
        <br>
        <div>
            <label>Email</label>
            <input type="email" required>
            <section class="invalid-feedback">
                Please Enter email
            </section>
        </div>
        <br>
        <section>
            <button class="btn btn-primary" 
                    type="submit">
                    submit
            </button>
        </section>
    </form>
    <script>
  
        // Example starter JavaScript for disabling form
        // submissions if there are invalid fields
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
  
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>
</html>


Output:

 

Example 2:  let’s see another example of validation custom styles.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href=
</head>
  
<body class="m-3">
    <h1 class="text-success"
        GeeksforGeeks
    </h1>
    <h3>Bootstrap5 Validation Custom styles</h3>
  
    <form class="needs-validation" novalidate>
        <div>
            <label class="form-label">Name</label>
            <input type="text" required>
            <section class="valid-feedback">
                Done
            </section>
        </div>
        <br>
        <div>
            <label>City</label>
            <input type="text" required>
            <section class="invalid-feedback">
                Please enter your city name
            </section>
        </div>
        <br>
        <div>
            <label>Password</label>
            <input type="password" required>
            <section class="invalid-feedback">
                Please Enter your password
            </section>
        </div>
        <br>
        <div>
            Are you eligible?: 
            <input type="checkbox" required>
            <section class="valid-feedback">
                Done
            </section>
        </div>
        <br>
        <div>
            Gender: Male <input type="radio" name="myGender"
            Female <input type="radio" name="myGender">
            Other <input type="radio" name="myGender" required>
            <section class="valid-feedback">
                Done
            </section>
        </div>
        <section>
            <button class="btn btn-primary" type="submit">
                submit
            </button>
        </section>
    </form>
    <script>
        // Example starter JavaScript for disabling form
        // submissions if there are invalid fields
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
  
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/forms/validation/#custom-styles



Last Updated : 22 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads