HTML Form Validation with Bootstrap

HTML Form is an essential element in the website. Most of the websites have at least one form section on the web page. It’s always recommended to validate the user’s input before submitting the form data. HTML5 form validation helps to make the server-side data submission secure. There are two types of validation, client-side and server-side. The client-side validation is a user-friendly way to validate HTML forms without backend server interaction.

The browser default validation method can be used with a required attribute in the input elements. If you want to display custom validation feedback messages, use JavaScript to change the form behavior.

In this example code snippet, we will create an HTML form with Bootstrap and integrate custom validation messages using JavaScript.

Bootstrap Library:

Only the Bootstrap CSS library is required for custom form and validation feedback styles.

• Use the following code to include Bootstrap’s compiled CSS.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

HTML Form:

For Bootstrap custom form validation, use novalidate attribute in the <form> element. It will disable the browser default validation feedback tooltips.

• Custom feedback styles are available with .form-control and .form-select Bootstrap classes.

The following HTML code will create a form with commonly used input elements and add custom validation feedback messages with Bootstrap.

<form class="row g-3 frm-validation" novalidate>
    <div class="col-md-6">
        <label for="first_name" class="form-label">First name</label>
        <input type="text" class="form-control" id="first_name" required>
        <div class="invalid-feedback">
            Please enter your first name.
        </div>
    </div>
    <div class="col-md-6">
        <label for="last_name" class="form-label">Last name</label>
        <input type="text" class="form-control" id="last_name" required>
        <div class="invalid-feedback">
            Please enter your last name.
        </div>
    </div>
    <div class="col-md-12">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" required>
        <div class="invalid-feedback">
            Please enter your email.
        </div>
    </div>
    <div class="col-md-6">
        <label for="username" class="form-label">Username</label>
        <div class="input-group has-validation">
            <span class="input-group-text" id="inputGroupPrepend">@</span>
            <input type="text" class="form-control" id="username" aria-describedby="inputGroupPrepend" required>
            <div class="invalid-feedback">
                Please choose a username.
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" required>
        <div class="invalid-feedback">
            Please enter your last name.
        </div>
    </div>
    <div class="col-md-6">
        <label for="city" class="form-label">City</label>
        <input type="text" class="form-control" id="city" required>
        <div class="invalid-feedback">
            Please provide a valid city.
        </div>
    </div>
    <div class="col-md-6">
        <label for="state" class="form-label">State</label>
        <select class="form-select" id="state" required>
            <option selected disabled value="">Choose...</option>
            <option>...</option>
        </select>
        <div class="invalid-feedback">
            Please select a valid state.
        </div>
    </div>
    <div class="col-md-6">
        <label for="zipcode" class="form-label">Zipcode</label>
        <input type="text" class="form-control" id="zipcode" required>
        <div class="invalid-feedback">
            Please provide a valid zipcode.
        </div>
    </div>
    <div class="col-md-6">
        <label for="country" class="form-label">Country</label>
        <input type="text" class="form-control" id="country" required>
        <div class="invalid-feedback">
            Please provide a valid country.
        </div>
    </div>
    <div class="col-md-12">
        <label for="bio" class="form-label">Bio</label>
        <textarea class="form-control" id="bio" placeholder="Bio info here..." required></textarea>
        <div class="invalid-feedback">
            Please enter some text about yourself.
        </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>

JavaScript Code:

Although we have disabled the browser default validation, form validation APIs can still be accessed in JavaScript.

• The following JavaScript will intercept the form submit button and show validation feedback to the user.

(() => {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.frm-validation')

    // Loop over them and prevent submission
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
    })
})()