引导浮动标签与 jquery 验证标签冲突

Posted 2023-05-07

【中文标题】引导浮动标签与 jquery 验证标签冲突

【英文标题】：boostrap floating label is conflict with jquery validation label

【发布时间】：2021-11-26 00:39:17

【问题描述】：

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

查看给定的屏幕截图：

我的代码是：

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

我想要这样的引导类添加（is-invalid），同时出现错误并在输入框下方显示错误消息

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

如何将它与带有引导浮动标签表单的 jquery 验证脚本一起使用。

【参考方案1】：

用简单的脚本解决了这个问题。我在下面创建了一个 sn-p：

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