我在 popover 中显示表单验证错误消息。它适用于文本元素。但它的位置在 select2 元素中发生了变化。它在文本元素的字段中心显示 popover 错误消息，但在 select 2 元素中它显示错误左侧 Angular 的消息如何在 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>最佳答案
我正在用 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 验证弹出窗口位置问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59065265/