jquery select2 下拉列表的验证弹出窗口位置问题

Question

我在 popover.it 中显示表单验证错误消息适用于文本 element.but 它的位置已更改 select2 element.it 在中心显示弹出窗口错误消息文本元素中的字段，但在 select 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>

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

jquery select2 下拉列表的验证弹出窗口位置问题

jquery validation popover position problem for select2 dropdown

css

validation

jquery

jquery-select2