Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error message below checkbox's when validate Bootstrap 4

Tags:

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;

enter image description here

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

like image 702
user1236784 Avatar asked Aug 08 '18 03:08

user1236784


1 Answers

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.

like image 145
tao Avatar answered Sep 28 '22 18:09

tao