title: Error message below checkbox's when validate Bootstrap 4
body: <p>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. </p>
  
  <pre><code>&lt;div class="row"&gt;
   &lt;div class="form-group col-md-12"&gt;
     &lt;div class=""&gt;&lt;label for="form_servicesRequested" class="names"&gt;Services Requested: *&lt;/label&gt;&lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="DJ"&gt;
            &lt;label class="form-check-label"&gt;DJ&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Videography"&gt;
            &lt;label class="form-check-label"&gt;Videography&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Photography"&gt;
            &lt;label class="form-check-label"&gt;Photography&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Wedding Officate"&gt;
            &lt;label class="form-check-label"&gt;Wedding Officiate&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Limo"&gt;
            &lt;label class="form-check-label"&gt;Limo&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Party Bus"&gt;
            &lt;label class="form-check-label"&gt;Party Bus&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Up Lighting"&gt;
            &lt;label class="form-check-label"&gt;Up Lighting&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Hed Table Backdrop"&gt;
            &lt;label class="form-check-label"&gt;Head Table Backdrop&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Head Table Decor"&gt;
            &lt;label class="form-check-label"&gt;Head Table Decor&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Sound For Ceremony"&gt;
            &lt;label class="form-check-label"&gt;Sound For Ceremony&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Arch"&gt;
            &lt;label class="form-check-label"&gt;Arch&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Guest Sign In Table Decor"&gt;
            &lt;label class="form-check-label"&gt;Guest Sign In Table Decor&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Gobo Design"&gt;
            &lt;label class="form-check-label"&gt;Gobo Design&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Ceiling Drapery"&gt;
            &lt;label class="form-check-label"&gt;Ceiling Drapery&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Sand Ceremont Set"&gt;
            &lt;label class="form-check-label"&gt;Sand Ceremony Set&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Chair Cover Sash"&gt;
            &lt;label class="form-check-label"&gt;Chair Cover Sash&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Time Capsule"&gt;
            &lt;label class="form-check-label"&gt;Time Capsule&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Cake Table Decor"&gt;
            &lt;label class="form-check-label"&gt;Cake Table Decor&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Wine Box Set"&gt;
            &lt;label class="form-check-label"&gt;Wine Box Set&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Unity Candle Set"&gt;
            &lt;label class="form-check-label"&gt;Unity Candle Set&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Ceremony Table"&gt;
            &lt;label class="form-check-label"&gt;Ceremony Table&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" name="services[]" value="Wedding Coordinator"&gt;
            &lt;label class="form-check-label"&gt;Wedding Coordinator&lt;/label&gt;
          &lt;/div&gt;
         &lt;/div&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p>Here is the validate script with rules, not showing all rules just the one for the checkbox's:</p>
  
  <pre><code>   $( 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" );
              }
          } );
  
      } );
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>      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" );
              }
          } );
  
      } );
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>            if ( element.prop( "type" ) === "checkbox" ) {
                      error.insertAfter( element.next( "label" ) );
                  } else {
                      error.insertAfter( element );
                  }
  </code></pre>
  
  <p>Here is an image showing where the error message appears next to DJ;</p>
  
  <p><a href="https://i.stack.imgur.com/nAG2A.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nAG2A.png" alt="enter image description here"></a></p>
  
  <p>I would be very grateful if someone could help me out on this. Everything else on the form validates properly. Thank you in advance.</p>