Clash Royale CLAN TAG#URR8PPP

Error message below checkbox's when validate Bootstrap 4

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.

1 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.

error

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.