jquery在select2.js中验证errorPlacement [重复]

Posted 2023-05-07

【中文标题】jquery在select2.js中验证errorPlacement [重复]

【英文标题】：jquery validate errorPlacement in select2.js [duplicate]

【发布时间】：2019-01-14 09:05:42

【问题描述】：

当select2 中的错误替换出现在框上方时，我想要框下方的错误替换。这是我的 html：

<form id="form" class="form_required">
    <select type="text" id="test1" class="form-control select2" required>
        <option value="">&nbsp();</option>
        <option value="1">1</option>
    </select>
    <button type="button" onclick="insert()">Submit</button>
</form>

这里是 javascript：

$('.select2').select2()

$(".form_required").validate(
    highlight: function (element, errorClass, validClass) 
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    ,
    unhighlight: function (element, errorClass, validClass) 
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    ,
    errorPlacement: function (error, element) 
        if (element.parent('.input-group').length) 
            error.insertAfter(element.parent());
        
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) 
            error.insertAfter(element.parent().parent());
        
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') 
            error.appendTo(element.parent().parent());
        
        else 
            error.insertAfter(element);
        
    
);

function insert()
    if ($('#form').valid())
        alert('OK');
    

1) 2)

不使用select2 时，错误替换显示在框下方，类似数字2，但使用select2 时，错误替换显示在框上方..

【问题讨论】：

jsfiddle.net/5f0r9vsy/86这个例子

Integrating jQuery Validate 与 Select2 之前已被询问和回答。请使用搜索。

【参考方案1】：

如果您检查select2 库的源代码，您会看到select2-container（负责选择2 下拉菜单的容器）被插入到select 元素之后。这是执行此操作的代码部分：

Select2.prototype._placeContainer = function ($container) 
 $container.insertAfter(this.$element);

 var width = this._resolveWidth(this.$element, this.options.get('width'));

 if (width != null) 
  $container.css('width', width);
 
;

这让我们可以轻松地将 jquery-validate 中的 错误消息 放置在 select2-container 之后。这是errorPlacement 选项的变化：

errorPlacement: function (error, element) 
    if(element.hasClass('select2') && element.next('.select2-container').length) 
        error.insertAfter(element.next('.select2-container'));
    
    ....

还有一个显示结果的sn-p：

$('.select2').select2(container: 'body')

$(".form_required").validate(
    highlight: function (element, errorClass, validClass) 
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    ,
    unhighlight: function (element, errorClass, validClass) 
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    ,
    errorPlacement: function (error, element) 
    		if(element.hasClass('select2') && element.next('.select2-container').length) 
        	error.insertAfter(element.next('.select2-container'));
         else if (element.parent('.input-group').length) 
            error.insertAfter(element.parent());
        
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) 
            error.insertAfter(element.parent().parent());
        
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') 
            error.appendTo(element.parent().parent());
        
        else 
            error.insertAfter(element);
        
    
);

form 
  margin: 20px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="form" class="form_required form-horizontal">    

<div class="form-group">
<div class="col-sm-8">

    <select type="text" id="test1" class="form-control select2" required>
        <option value="">&nbsp;</option>
        <option value="1">test1</option>
    </select>
</div>
</div>

<div class="form-group">
    <button type="button" onclick="insert()">Submit</button>
</div>
</form>

<form id="form2" class="form_required form-horizontal">    

<div class="form-group">
    <div class="col-sm-8">
    <select type="text" id="test2" class="form-control" required>
        <option value="">&nbsp;</option>
        <option value="1">test2</option>
    </select>
    </div>
</div>

<div class="form-group">
    <button type="button" onclick="insert2()">Submit</button>
</div>
</form>

<script>
function insert()
    if ($('#form').valid())
        alert('OK');
    


function insert2()
    if ($('#form2').valid())
        alert('OK');
    

</script>

希望这会有所帮助。

【讨论】：

非常感谢@Shashank

不客气。很高兴我能帮上忙。

帮了我很多。谢谢