bootstrap 浮动标签与 jquery 验证标签冲突

Question

我正在使用 boostrap 5 floating label 代码片段和 jquery 验证，但是当显示错误消息时它与两个标签冲突。

查看给定的屏幕截图：

我的代码是：

<div class="form-floating mb-3">
    <input type="text" class="form-control" placeholder="Name" name="name" required>
    <label>Name</label>
</div>

我想要这样的 bootstrap class 添加 (is-invalid) 时出现错误并在输入框下方显示错误消息

<div class="invalid-feedback">
        Please enter Name
</div>

如何将此与 jquery 验证脚本一起使用 bootstrap 浮动标签形式。

Answer 1

用简单的脚本解决了这个问题。我在下面给出了一个片段：

$(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>

bootstrap 浮动标签与 jquery 验证标签冲突

boostrap floating label is conflict with jquery validation label

html

jquery

jquery-validate

bootstrap-5