boostrap floating label is conflict with jquery validation label - html

Question

I am using boostrap 5 floating label code snippet and with jquery validation but when error message is showing it is conflict with both labels.
see given screenshots:
My code is:
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Name" name="name" required>
<label>Name</label>
</div>
I want like this for a bootstrap class add (is-invalid) while getting error and show a error message below input box with
<div class="invalid-feedback">
Please enter Name
</div>
How can I use this with jquery validation script with bootstrap floating label form.

Answer 1

Fixed this with simple script. I create a snippet in given below:
$(document).ready(function() {
$("#my_form").validate({
rules: {
name : {
required: true
}
},
messages : {
name: "Please enter Name"
},
errorElement: "div",
errorPlacement: function ( error, element ) {
error.addClass( "invalid-feedback" );
error.insertAfter( element );
},
highlight: function(element) {
$(element).removeClass('is-valid').addClass('is-invalid');
},
unhighlight: function(element) {
$(element).removeClass('is-invalid').addClass('is-valid');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-6">
<form action="" id="my_form" method="post">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="Name" name="name">
<label>Name</label>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary xp-submit-btn">Submit</button>
</div>
</form>
</div>
<div class="col"></div>
</div>
</div>