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.


 
   Services Requested: *
        
          
          DJ
        
        
          
          Videography
        
        
          
          Photography
        
        
          
          Wedding Officiate
        
        
          
          Limo
        
        
          
          Party Bus
        
        
          
          Up Lighting
        
        
          
          Head Table Backdrop
        
        
          
          Head Table Decor
        
        
          
          Sound For Ceremony
        
        
          
          Arch
        
        
          
          Guest Sign In Table Decor
        
        
          
          Gobo Design
        
        
          
          Ceiling Drapery
        
        
          
          Sand Ceremony Set
        
        
          
          Chair Cover Sash
        
        
          
          Time Capsule
        
        
          
          Cake Table Decor
        
        
          
          Wine Box Set
        
        
          
          Unity Candle Set
        
        
          
          Ceremony Table
        
        
          
          Wedding Coordinator

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.

tao · Accepted Answer

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.

Error message below checkbox's when validate Bootstrap 4

Answers (1)

Related Questions

Error message below checkbox&#39;s when validate Bootstrap 4

Answers (1)

Related Questions

Error message below checkbox's when validate Bootstrap 4