Error message below checkbox's when validate Bootstrap 4

Question

I am having trouble to get the error message to show below my checkbox's when validated. I know where the problem lies But not sure how to fix it. Here is my checkbox html which there are 22.

<div class="row">
 <div class="form-group col-md-12">
   <div class=""><label for="form_servicesRequested" class="names">Services Requested: *</label></div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="DJ">
          <label class="form-check-label">DJ</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Videography">
          <label class="form-check-label">Videography</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Photography">
          <label class="form-check-label">Photography</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Wedding Officate">
          <label class="form-check-label">Wedding Officiate</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Limo">
          <label class="form-check-label">Limo</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Party Bus">
          <label class="form-check-label">Party Bus</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Up Lighting">
          <label class="form-check-label">Up Lighting</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Hed Table Backdrop">
          <label class="form-check-label">Head Table Backdrop</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Head Table Decor">
          <label class="form-check-label">Head Table Decor</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Sound For Ceremony">
          <label class="form-check-label">Sound For Ceremony</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Arch">
          <label class="form-check-label">Arch</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Guest Sign In Table Decor">
          <label class="form-check-label">Guest Sign In Table Decor</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Gobo Design">
          <label class="form-check-label">Gobo Design</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Ceiling Drapery">
          <label class="form-check-label">Ceiling Drapery</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Sand Ceremont Set">
          <label class="form-check-label">Sand Ceremony Set</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Chair Cover Sash">
          <label class="form-check-label">Chair Cover Sash</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Time Capsule">
          <label class="form-check-label">Time Capsule</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Cake Table Decor">
          <label class="form-check-label">Cake Table Decor</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Wine Box Set">
          <label class="form-check-label">Wine Box Set</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Unity Candle Set">
          <label class="form-check-label">Unity Candle Set</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Ceremony Table">
          <label class="form-check-label">Ceremony Table</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Wedding Coordinator">
          <label class="form-check-label">Wedding Coordinator</label>
        </div>
       </div>

     </div>

Here is the validate script with rules, not showing all rules just the one for the checkbox's:

   $( document ).ready( function () {
        $( "#contact-form" ).validate( {
            rules: {
                "services[]": {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                    "services[]": "Please select at least 2 services"

            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `invalid-feedback` class to the error element
                error.addClass( "invalid-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
            }
        } );

    } );

Now when I do a validate it does show error message for checkbox's Except it is right next to label class DJ. Where I'm sure the problems lies is in the code here:

      errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `invalid-feedback` class to the error element
                error.addClass( "invalid-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
            }
        } );

    } );

This section is where the problem is and not sure how to get the error message to be below ALL checkbox's instead of right next to the label DJ.

            if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }

Here is an image showing where the error message appears next to DJ;

I would be very grateful if someone could help me out on this. Everything else on the form validates properly. Thank you in advance.

Answer 1

Replacing

error.insertAfter( element.next( "label" ) );

with

error.insertAfter( element.closest( ".form-group" ) );

should place the error message after all the checkboxes.

To have complete control over the element displaying your error, you could simply add a dedicated container with a unique id at the bottom of the list and use something like:

error.appendTo(document.querySelector('#errorContainerId'))

You can use any jQuery DOM manipulation method on the error object.