5 Balloons

I worked on a Bootstrap v4.4 form where the validation is done on the server-side (Laravel) and when I receive errors on the front-end (Vue), I need to apply some custom styling on the form input’s to notify the user of the errors in the input fields.

Turns out Bootstrap does have custom classes for custom validation error styles for your form inputs.

Here is the short tutorial on how to achieve those when you are doing server-side validation.

Consider a very basic form with only two fields, name, and email.

There are four classes provided by bootstrap that helps us to style our form to display validation results.

1. is-valid
2. is-invalid
3. valid-feedback (Display’s only if is-valid class is applied to the input)
4. invalid-feedback (Display’s only if is-invalid class is applied to the input)

Note : For validation message to appear on the screen you don’t need to add was-validated class to your form.

For server-side validation, you need to add the class .is-valid or .is-invalid to your input field, depending upon the validation success or failure.
And to display the message, you need to add a div just below the input field with a class of .valid-feedback in case of validation success and .invalid-feedback in case of validation failure.

Here is how.

<form class="contact-form" method="POST" novalidate="novalidate">
        <div class="form-row">
            <div class="form-group col">
                <input type="text" placeholder="Your Name" value="" maxlength="100" class="form-control is-valid" name="name" >
                <div class="valid-feedback">
                    Cool Name !
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <input type="email" placeholder="Your E-mail" value=""  maxlength="100" class="form-control is-invalid" name="email" required="">
                <div class="invalid-feedback">
                    Email address is required.
                </div>
             </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <input type="submit" value="Send Message" class="btn btn-primary btn-lg mb-5" data-loading-text="Loading...">
            </div>
        </div>
    </form>

This will result in the following output