htmljqueryjquery-validatebootstrap-5

boostrap floating label is conflict with jquery validation label

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: enter image description here

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>

enter image description here

How can I use this with jquery validation script with bootstrap floating label form.

Solution

  • 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>