select2下拉菜单的jquery验证弹出位置问题

Posted

技术标签:

【中文标题】select2下拉菜单的jquery验证弹出位置问题【英文标题】：jquery validation popover position problem for select2 dropdown 【发布时间】：2020-03-22 17:14:19 【问题描述】：

我在 popover 中显示表单验证错误消息。它适用于文本元素。但它的位置是 select2 元素的变化。它在文本元素的字段中心显示弹出框错误消息，但在选择 2 元素中显示错误左侧角的消息如何在 select2 错误消息的中心显示弹出消息 

$(document).ready(function()
		my_validate();
    $("#country_selF").select2();
)
var data_form = $( "#data_form" );
function my_validate()
   data_form.validate( 
      rules: 
          country_name:
                required:true
          ,
          state_name :
                required:true
               
          
      ,
      messages:
          country_name:
            required : "Select country name"
          ,
          state_name:
            required : 'Enter state name'
          
      ,
      errorClass: "my-error-class",
      showErrors: function(errorMap, errorList) 
          $.each( this.successList , function(index, value) 
              $(value).popover('hide');
          ); 
          $.each( errorList , function(index, value) 
           
            var popoverDta = $(value.element).popover(
                  trigger   : 'manual',
                  placement : 'top',
                  content   : value.message,
                  template  : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content text-danger"><p></p></div></div></div>'
            );                      
            $(value.element).data('bs.popover').options.content = value.message;
                $(value.element).popover('show');
            );
              
  ); 
 
 $(document).on('click',".save_btn",function()
  if(data_form.valid() == true)
  
  );
form
  margin:50px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- form start -->
            <form class="form-horizontal" method="post" name="data_form" id="data_form" action="http://172.16.20.9:1010/galaxy_vehicle_tracking/state_master.php" >
              <input type="hidden" name="fld_id" value="" id="fld_id">
              <div class="box-body">
                <div class="form-group">
                  <!-- Country name -->
                  <label for="country_selF" class="col-lg-2 col-md-2 col-sm-12 col-xs-12 control-label">Country Name</label>
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <select  class="form-control custom_frm enb_dsb_fld"  placeholder="" name="country_name" value="" id="country_selF" style="width:100%;" ></select>
                  </div>
                  <!-- end of the Country Name --> 
                  <!-- state name -->       
                   <label for="state_name" class="col-lg-2 col-md-2 col-sm-12 col-xs-12 control-label">State Name</label>
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <input type="text" class="form-control enb_dsb_fld mv_next" id="state_name"  name="state_name" required="required">
                  </div>         
                  <!-- end of the state name -->
                </div><!-- end of the form group -->               
              <!-- /.box-body -->
              <div class="box-footer" style="text-align: right;" id="btn_box">
                <div class="col-sm-12" style="text-align: right;" id="btn_box">             
                              <button type="button" class="btn btn-success save_btn btn-sm" id="save_btn">Save</button>
              </div>
              </div>
              </div>
              <!-- /.box-footer -->
            </form>

【问题讨论】：

为什么我得到了反对票？我的问题有什么问题？ 【参考方案1】：

我正在用 css 做这个。请检查我的css代码仔细，

让我知道进一步的澄清

希望对您有所帮助。 :)

$(document).ready(function()
  my_validate();
  $("#country_selF").select2();
)
var data_form = $( "#data_form" );
function my_validate()
 data_form.validate( 
    rules: 
        country_name:
              required:true
        ,
        state_name :
              required:true
             
        
    ,
    messages:
        country_name:
          required : "Select country name"
        ,
        state_name:
          required : 'Enter state name'
        
    ,
    errorClass: "my-error-class",
    showErrors: function(errorMap, errorList) 
        $.each( this.successList , function(index, value) 
            $(value).popover('hide');
        ); 
        $.each( errorList , function(index, value) 
         
          var popoverDta = $(value.element).popover(
                trigger   : 'manual',
                placement : 'top',
                content   : value.message,
                template  : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content text-danger"><p></p></div></div></div>'
          );                      
          $(value.element).data('bs.popover').options.content = value.message;
              $(value.element).popover('show');
          );
            
); 

$(document).on('click',".save_btn",function()
if(data_form.valid() == true)

);
form
  margin:50px;

.popover.top>.arrow
  left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;

.popover.top
  left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    max-width: 200px;
    text-align: center;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- form start -->
            <form class="form-horizontal" method="post" name="data_form" id="data_form" action="http://172.16.20.9:1010/galaxy_vehicle_tracking/state_master.php" >
              <input type="hidden" name="fld_id" value="" id="fld_id">
              <div class="box-body">
                <div class="form-group">
                  <!-- Country name -->
                  <label for="country_selF" class="col-lg-2 col-md-2 col-sm-12 col-xs-12 control-label">Country Name</label>
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <select  class="form-control custom_frm enb_dsb_fld"  placeholder="" name="country_name" value="" id="country_selF" style="width:100%;" ></select>
                  </div>
                  <!-- end of the Country Name --> 
                  <!-- state name -->       
                   <label for="state_name" class="col-lg-2 col-md-2 col-sm-12 col-xs-12 control-label">State Name</label>
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <input type="text" class="form-control enb_dsb_fld mv_next" id="state_name"  name="state_name" required="required">
                  </div>         
                  <!-- end of the state name -->
                </div><!-- end of the form group -->               
              <!-- /.box-body -->
              <div class="box-footer" style="text-align: right;" id="btn_box">
                <div class="col-sm-12" style="text-align: right;" id="btn_box">             
                              <button type="button" class="btn btn-success save_btn btn-sm" id="save_btn">Save</button>
              </div>
              </div>
              </div>
              <!-- /.box-footer -->
            </form>

【讨论】：

以上是关于select2下拉菜单的jquery验证弹出位置问题的主要内容，如果未能解决你的问题，请参考以下文章

如何为多个下拉菜单设置 jquery select2 的选定值？

使用 jquery 用新数据覆盖现有的 select2 多选下拉列表

仅在输入至少一个字母后才使 select2 下拉菜单下拉

jQuery Select2 重复

Select2多选下拉菜单导致窗口滚动

jQuery Select2 CSS 问题